diff --git a/examples/with-nhost-auth-realtime-graphql/.env.local.example b/examples/with-nhost-auth-realtime-graphql/.env.local.example
new file mode 100644
index 0000000000..38a91f151a
--- /dev/null
+++ b/examples/with-nhost-auth-realtime-graphql/.env.local.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_GRAPHQL_URL=https://hasura-[project-id].nhost.app/v1/graphql
+NEXT_PUBLIC_BACKEND_URL=https://backend-[project-id].nhost.app
\ No newline at end of file
diff --git a/examples/with-nhost-auth-realtime-graphql/.gitignore b/examples/with-nhost-auth-realtime-graphql/.gitignore
new file mode 100644
index 0000000000..1437c53f70
--- /dev/null
+++ b/examples/with-nhost-auth-realtime-graphql/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/with-nhost-auth-realtime-graphql/README.md b/examples/with-nhost-auth-realtime-graphql/README.md
new file mode 100644
index 0000000000..068f94e48a
--- /dev/null
+++ b/examples/with-nhost-auth-realtime-graphql/README.md
@@ -0,0 +1,61 @@
+# Auth & Realtime GraphQL Example Using Next.js and Nhost
+
+This example showcases Next.js as the frontend using [Nhost](https://nhost.io/) as the backend.
+
+## Demo
+
+### [https://nhost-nextjs-example.vercel.app/](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](#step-4-add-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-nhost-auth-realtime-graphql&project-name=with-nhost-auth-realtime-graphql&repository-name=with-nhost-auth-realtime-graphql&env=NEXT_PUBLIC_GRAPHQL_URL,NEXT_PUBLIC_BACKEND_URL&envDescription=Enter%20your%20Nhost%20project%27s%20URLs)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+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](https://console.nhost.io).
+
+### 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
+
+```bash
+npm install
+npm run dev
+
+# or
+
+yarn install
+yarn dev
+```
+
+Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
+
+### Step 6. Deploy on Vercel
+
+You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-nhost-auth-realtime-graphql/components/private-route.js b/examples/with-nhost-auth-realtime-graphql/components/private-route.js
new file mode 100644
index 0000000000..ae7d89ac67
--- /dev/null
+++ b/examples/with-nhost-auth-realtime-graphql/components/private-route.js
@@ -0,0 +1,22 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useRouter } from 'next/router'
+import { useAuth } from '@nhost/react-auth'
+
+export function PrivateRoute(Component) {
+ return (props) => {
+ const router = useRouter()
+ const { signedIn } = useAuth()
+
+ // wait to see if the user is logged in or not.
+ if (signedIn === null) {
+ return