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.

npx create-wundergraph-app --example nextjs-clerk

First, you need to create a Clerk application and configure the Clerk API keys in your .env.local file.

1. Go to Clerk and create a new application or use an existing one.
2. On your application dashboard to to API Key
3. Use the Quick Copy for Next.js and copy the .env.local
4. Create a new .env.local file in the root folder (next to the package.json)
5. Paste the credentials into the .env.local file

1. Go to JWT Templates and create a new Blank template
2. Name it wundergraph
3. Use the following template: (You can also include other claims as needed)

{
  "id": "{{user.id}}",
  "email": "{{user.primary_email_address}}",
  "lastName": "{{user.last_name}}",
  "username": "{{user.username}}",
  "firstName": "{{user.first_name}}"
}

1. Copy the JWKS Endpoint url
2. Add a new environment variable to .env.local called CLERK_JWKS_URL and paste the url as the value

Running npm start will start WunderGraph and Next.js in development mode.

npm start

Head over to http://localhost:3000 in your browser to see the integration in action.

Clicking the 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.

• Clerk documentation
• Next.js client documentation

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.