Next.js + Clerk Example
The NextJS + Clerk example demonstrates how you can use Clerk as your authentication provider with WunderGraph.
This example uses Clerk JWT Templates, Clerk Next.js integration and the WunderGraph Next.js client.
The quickest way to get started is by using create-wundergraph-app.
Clerk API keys
First, you need to create a Clerk application and configure the Clerk API keys in your
- Go to Clerk and create a new application or use an existing one.
- On your application dashboard to to
- Use the
Quick Copyfor Next.js and copy the
- Create a new
.env.localfile in the root folder (next to the
- Paste the credentials into the
Clerk JWT Templates
- Go to
JWT Templatesand create a new
- Name it
- Use the following template: (You can also include other claims as needed)
- Copy the JWKS Endpoint url
- Add a new environment variable to
CLERK_JWKS_URLand paste the url as the value
Run the app
npm start will start WunderGraph and Next.js in development mode.
Head over to
http://localhost:3000 in your browser to see the integration in action.
Login button will redirect you to the Clerk login page. After logging in, you will be redirected back to the app and you will see the result of the Countries operation and the user claims.
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.