9f9214abe5
This PR updates the docs and examples for `create-next-app` to include pnpm usage.
The following script was used to update every example README:
```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')
for (let example of examples) {
const filename = `./examples/${example}/README.md`
const markdown = fs.readFileSync(filename, 'utf8')
const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
const output = markdown.replace(regex, (yarn, group) => {
const pnpm = `pnpm create next-app -- --example ${group}`
return `${yarn}\n# or\n${pnpm}`
})
fs.writeFileSync(filename, output)
}
```
|
||
|---|---|---|
| .. | ||
| 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 with-nhost-auth-realtime-graphql nhost-app
# or
yarn create next-app --example with-nhost-auth-realtime-graphql nhost-app
# or
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
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).