The NextJS example demonstrates the power of code generation, when it comes to integrating WunderGraph with frontend frameworks like Next.js.
Let's start by configuring WunderGraph.
What's notable here is that we're using the
NextJsTemplate to generate a Next.js client.
WunderGraph comes with a powerful framework for generating code. In this case, we're generating a TypeScript client, wrapped with React Hooks and an "App" wrapper to enable Server Side Rendering (SSR) out of the box.
Define an Operation
Use from Next.js
Your operations will be compiled into RPC endpoints. The template will generate the NextJS client, so all you have to do is to import he
useQuery hook and call your newly created API.
Wrapping the Page in
withWunderGraph will make sure that Server Side Rendering (SSR) works, that's it.
Deploy to WunderGraph Cloud
The easiest way to deploy your WunderGraph app is to use WunderGraph Cloud. Enable the Vercel integration to deploy the Next.js frontend to Vercel.