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
- Yarn
npm install @nhost/nextjs graphql
yarn add @nhost/nextjs graphql
Initializing
Initialize a single nhost
instance using your Nhost subdomain
and region
,
and wrap your app with the NhostProvider
:
import { NhostClient, NhostProvider } from '@nhost/nextjs'
import type { AppProps } from 'next/app'
const nhost = new NhostClient({
subdomain: '<your-subdomain>',
region: '<your-region>'
})
function MyApp({ Component, pageProps }: AppProps) {
return (
<NhostProvider nhost={nhost} initial={pageProps.nhostSession}>
<Component {...pageProps} />
</NhostProvider>
)
}
export default MyApp
The nhost
instance created with the NhostClient
above is the same as the JavaScript Nhost client.
Using custom URLs
There are cases where you might want to use a custom URL for one or more of the services (e.g: when you are self-hosting or you are running services on custom ports). You can do this by passing in the custom URLs when initializing the Nhost client:
import { NhostClient, NhostProvider } from '@nhost/nextjs'
import type { AppProps } from 'next/app'
const nhost = new NhostClient({
authUrl: 'https://auth.mydomain.com/v1',
storageUrl: 'https://storage.mydomain.com/v1',
graphqlUrl: 'https://graphql.mydomain.com/v1',
functionsUrl: 'https://functions.mydomain.com/v1'
})
function MyApp({ Component, pageProps }: AppProps) {
return (
<NhostProvider nhost={nhost} initial={pageProps.nhostSession}>
<Component {...pageProps} />
</NhostProvider>
)
}
export default MyApp
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
.
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
- Yarn
npm install @nhost/react-apollo @apollo/client
yarn add @nhost/react-apollo @apollo/client
Initializing
Wrap the Next.js app with the NhostApolloProvider
and make sure the NhostApolloProvider
is nested inside the NhostProvider
.
import type { AppProps } from 'next/app'
import { NhostClient, NhostProvider } 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 (
<NhostProvider nhost={nhost} initial={pageProps.nhostSession}>
<NhostApolloProvider nhost={nhost}>
<Component {...pageProps} />
</NhostApolloProvider>
</NhostProvider>
)
}
export default MyApp
Since Next.js uses React you can read more about how to use Apollo and GraphQL in here.