# @nhost/nextjs

> Nhost NextJS library

Latest version **2.3.1** (published 2025-08-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @nhost/nextjs
pnpm add @nhost/nextjs
yarn add @nhost/nextjs
bun add @nhost/nextjs
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.3.1 |
| Published | 2025-08-29 |
| First published | 2022-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9376 |
| Author | Nhost |
| Maintainers | nunopato, david.barroso |
| Keywords | nhost, hasura, storage, auth, authentication, graphql, postgresql, realtime, next, nextjs, ssr |

## Links

- npm: https://www.npmjs.com/package/@nhost/nextjs
- Repository: https://github.com/nhost/nhost
- Homepage: https://nhost.io
- Issues: https://github.com/nhost/nhost/issues
- npm.io page: https://npm.io/package/@nhost/nextjs

## Dependencies (5)

- [xstate](https://npm.io/package/xstate.md) ^4.38.3
- [graphql](https://npm.io/package/graphql.md) 16.8.1
- [js-cookie](https://npm.io/package/js-cookie.md) ^3.0.5
- [@nhost/react](https://npm.io/package/@nhost/react.md) 3.11.2
- [isomorphic-unfetch](https://npm.io/package/isomorphic-unfetch.md) ^3.1.0

## Alternatives

- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads
- [escher-request](https://npm.io/package/escher-request.md) — 545 weekly downloads

## Recent versions

- 2.3.1 (latest) — 2025-08-29
- 2.3.0 — 2025-08-12
- 2.2.9 — 2025-07-01
- 2.2.8 — 2025-06-05
- 2.2.7 — 2025-04-28
- 2.2.6 — 2025-04-08
- 2.2.5 — 2025-03-12
- 2.2.4 — 2025-02-25
- 2.2.3 — 2025-02-05
- 2.2.2 — 2025-01-27
- 2.2.1 — 2025-01-10
- 2.2.0 — 2025-01-08
- 2.1.24 — 2024-11-28
- 2.1.23 — 2024-11-26
- 2.1.22 — 2024-09-25
- … 128 more at https://npm.io/package/@nhost/nextjs/versions

## README

<h1 align="center">@nhost/nextjs</h1>
<h2 align="center">Use Nhost with NextJS on SSR mode</h2>

<p align="center">
  <img alt="npm" src="https://img.shields.io/npm/v/@nhost/nextjs">
  <img alt="npm" src="https://img.shields.io/npm/dm/@nhost/nextjs">
  <a href="LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="license: MIT" />
  </a>
</p>

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.

## Documentation

- [Quickstart](https://docs.nhost.io/platform/quickstarts/nextjs)
- [Reference documentation](https://docs.nhost.io/reference/nextjs)

## Installation

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

```bash
# With npm
npm install @nhost/nextjs graphql

# With Yarn
yarn add @nhost/nextjs graphql
```

## Initializing

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

```jsx title=pages/_app.js
import type { AppProps } from 'next/app'

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

const nhost = new NhostClient({
  subdomain: '<Your Nhost project subdomain>',
  region: '<Your Nhost project region>'
})

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`.

```jsx title=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(
    { subdomain: '<project_subdomain>', region: '<project_region>' },
    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

```bash
# With npm
npm install @nhost/react-apollo @apollo/client

# With Yarn
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`.

```jsx title=pages/_app.js
import type { AppProps } from 'next/app'

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

const nhost = new NhostClient({
  subdomain: '<Your Nhost app subdomain>',
  region: '<Your Nhost app 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 is built on top of React you can read more about how to use Apollo and GraphQL in [here](/reference/react/apollo#usage).

---
_Source: https://npm.io/package/@nhost/nextjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._