Auth & Realtime GraphQL Example Using Next.js and Nhost

This example showcases Next.js as the frontend using Nhost as the backend.

Demo

https://nhost-nextjs-example.vercel.app/

Deploy Your Own

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-nhost-auth-realtime-graphql nhost-app

yarn create next-app --example with-nhost-auth-realtime-graphql nhost-app

pnpm create next-app --example with-nhost-auth-realtime-graphql nhost-app

Configuration

Step 1. Create an account and a project on Nhost

Create an account and project on Nhost.

Step 2. Create items database

Go to your project's Hasura console. Go to the DATA tab in the top menu and click SQL in the bottom left menu.

Then copy the content from setup/data.sql in this example and paste it in the Raw SQL form in the Hasura Console. Make sure Track this is checked and click Run!

Step 3. Add API metadata

Again, in the Hasura console, click on the gearwheel (settings) in the top right menu. Click on Import metadata and select the file setup/hasura-metadata.json in this repository.

Step 4. Add environment variables

Copy .env.local.example to .env.local and update the two URLs with your Nhost project URLs. You find the URLs in the Nhost console dashboard of your project.

Step 5. Run Next.js in development mode

npm install
npm run dev
# or
yarn install
yarn dev
# or
pnpm install
pnpm dev

Your app should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.

Step 6. Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).