61f56f997c
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).