Next.js Boilerplate Setup

Github logo Edit on GitHub

For this tutorial, the GraphQL backend and the basic app UI is already ready. Our task will be to convert the "static" UI into a working realtime app in Next.js

Download and run the boilerplate

  1. Download the boilerplate from https://hasura.io/learn/graphql/nextjs-fullstack-serverless/boilerplate.zip
  2. Unzip and make sure you're in the app-boilerplate directory
  3. Install dependencies and run the "static" app
    • yarn install
    • yarn dev

Configure the environment variables

Copy the .env.example to .env and configure the values for Auth0.

The AUTH0_CLIENT_ID, AUTH0_DOMAIN, AUTH0_CLIENT_SECRET are available in your Auth0 application settings and SESSION_COOKIE_SECRET can be any random string of at least 32 characters and it is used to encrypt the cookie. Enter the Identifier found from your Auth0 API settings to AUTH0_AUDIENCE.

DOMAIN=http://localhost:3000
AUTH0_CLIENT_ID=
AUTH0_AUDIENCE=https://hasura.io/learn
AUTH0_DOMAIN=
AUTH0_CLIENT_SECRET=
REDIRECT_URI=http://localhost:3000/api/callback
POST_LOGOUT_REDIRECT_URI=http://localhost:3000/
SESSION_COOKIE_SECRET=

This is what you should see after the steps above:

Boilerplate after login

Close

Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.
Previous
Sync Users with Rules
Next
Configure Apollo Client with Next.js