Next.js with App Directory Example

WunderGraph Next.js with App Directory Starter

The NextJS App Directory example demonstrates the power of code generation, when it comes to integrating WunderGraph with frontend frameworks like Next.js.


  1. Install the dependencies and run the complete example in one command:
npm install && npm start

After a while, a new browser tab will open, and you can start exploring the application. If no tab is open, navigate to http://localhost:3000 .

Running WunderGraph will automatically introspect the data-source and generate an API for you. You can add more Operations (e.g. Queries or Mutations) by adding more "*.graphql" files to the directory ./wundergraph/operations. Each file becomes an Operation. The Operation name is not relevant, the file name is.

This example includes how to work with Server Components as well as Experimental Server Actions.

Learn More

Deploy to WunderGraph Cloud

Deploy to WunderGraph

Got Questions?

Join us on Discord!


Was this article helpful to you?
Provide feedback

Edit this page