.. | ||
components | ||
pages | ||
setup | ||
utils | ||
.env.local.example | ||
.gitignore | ||
package.json | ||
README.md |
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
Once you have created a Nhost project and have access to the environment variables you'll need, deploy the example using Vercel:
How to use
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example nhost nhost-app
# or
yarn create next-app --example nhost 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
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).