Skip to main content

Next.js

The Nhost Next.js client exports a React provider for Next.js and React hooks that make it easier to work with Nhost in your Next.js app. The Next.js client is built on top of the Nhost React client and exports the same hooks and helpers.

Installation

Install the Nhost Next.js client, React client together with GraphQL:

npm install @nhost/react @nhost/nextjs graphql

Initializing

Initialize a single nhost instance and wrap your app with the NhostNextProvider.

pages/_app.js
import type { AppProps } from 'next/app'

import { NhostClient, NhostNextProvider } from '@nhost/nextjs'

const nhost = new NhostClient({
subdomain: '<your-subdomain>',
region: '<your-region>'
})

function MyApp({ Component, pageProps }: AppProps) {
return (
<NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
<Component {...pageProps} />
</NhostNextProvider>
)
}

export default MyApp
info

The nhost instance created with the NhostClient above is the same as the JavaScript Nhost client.

Server-Side Rendering (SSR)

You need to load the session from the server first from getServerSideProps. Once it is done, the _app component will make sure to load or update the session through pageProps.

pages/ssr-page.tsx
import { NextPageContext } from 'next'
import React from 'react'

import {
getNhostSession,
NhostSession,
useAccessToken,
useAuthenticated,
useUserData
} from '@nhost/nextjs'

export async function getServerSideProps(context: NextPageContext) {
const nhostSession = await getNhostSession('<Your Nhost Backend URL>', context)

return {
props: {
nhostSession
}
}
}

const ServerSidePage: React.FC<{ initial: NhostSession }> = () => {
const isAuthenticated = useAuthenticated()
const user = useUserData()
const accessToken = useAccessToken()

if (!isAuthenticated) {
return <div>User it not authenticated</div>
}

return (
<div>
<h1>{user?.displayName} is authenticated</h1>
<div>Access token: {accessToken}</div>
</div>
)
}

export default ServerSidePage

Apollo GraphQL

You can use Apollo's GraphQL Client together with Next.js and Nhost.

Installation

npm install @nhost/react-apollo @apollo/client

Initializing

Wrap the Next.js app with the NhostApolloProvider and make sure the NhostApolloProvider is nested inside the NhostNextProvider.

pages/_app.js
import type { AppProps } from 'next/app'

import { NhostClient, NhostNextProvider } from '@nhost/nextjs'
import { NhostApolloProvider } from '@nhost/react-apollo'

const nhost = new NhostClient({
subdomain: '<your-subdomain>',
region: '<your-region>'
})

function MyApp({ Component, pageProps }: AppProps) {
return (
<NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
<NhostApolloProvider nhost={nhost}>
<Component {...pageProps} />
</NhostApolloProvider>
</NhostNextProvider>
)
}

export default MyApp

Since Next.js uses React you can read more about how to use Apollo and GraphQL in here.