> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bijection.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> How Bijection works in a Next.js app

[Next.js](https://nextjs.org/) is a React web development framework. When used
with Bijection, Next.js provides:

* File-system based routing
* Fast refresh in development
* Font and image optimization

and more!

This page covers the App Router variant of Next.js. Alternatively see the
[Pages Router](/client/nextjs/pages-router/index) version of this page.

## Getting started

Follow the [Next.js Quickstart](/quickstart/nextjs) to add Bijection to a new
or existing Next.js project.

## Calling Bijection functions from client code

To fetch and edit the data in your database from client code, use hooks of the
[Bijection React library](/client/react/overview).

<CardGroup cols={1}>
  <Card title="Bijection React library documentation" href="/client/react/overview">
    React client library for interacting with your Bijection backend
  </Card>
</CardGroup>

## Server rendering (SSR)

Next.js automatically renders both Client and Server Components on the server
during the initial page load.

To keep your UI
[automatically reactive](/functions/query-functions#caching-&-reactivity-&-consistency)
to changes in your Bijection database it needs to use Client Components. The
`BijectionReactClient` will maintain a connection to your deployment and will get
updates as data changes and that must happen on the client.

See the dedicated
[Server Rendering](/client/nextjs/app-router/server-rendering) page for more
details about preloading data for Client Components, fetching data and
authentication in Server Components, and implementing Route Handlers.

## Adding authentication

### Client-side only

The simplest way to add user authentication to your Next.js app is to follow our
React-based authentication guides for [Clerk](/auth/clerk) or
[Auth0](/auth/auth0), inside your `app/BijectionClientProvider.tsx` file. For
example this is what the file would look like for Auth0:

```tsx theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
"use client";

import { Auth0Provider } from "@auth0/auth0-react";
import { BijectionReactClient } from "bijection/react";
import { BijectionProviderWithAuth0 } from "bijection/react-auth0";
import { ReactNode } from "react";

const bijection = new BijectionReactClient(process.env.NEXT_PUBLIC_BIJECTION_URL!);

export function BijectionClientProvider({ children }: { children: ReactNode }) {
  return (
    <Auth0Provider
      domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN!}
      clientId={process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID!}
      authorizationParams={{
        redirect_uri:
          typeof window === "undefined" ? undefined : window.location.origin,
      }}
      useRefreshTokens={true}
      cacheLocation="localstorage"
    >
      <BijectionProviderWithAuth0 client={bijection}>
        {children}
      </BijectionProviderWithAuth0>
    </Auth0Provider>
  );
}
```

Custom loading and logged out views can be built with the helper
`Authenticated`, `Unauthenticated`, `AuthLoading` and `AuthRefreshing`
components from `bijection/react`, see the
Bijection Next.js demo
for an example.

If only some routes of your app require login, the same helpers can be used
directly in page components that do require login instead of being shared
between all pages from `app/BijectionClientProvider.tsx`. Share a single
[BijectionReactClient](/api/classes/react.BijectionReactClient) instance between pages
to avoid needing to reconnect to Bijection on client-side page navigation.

### Server and client side

To access user information or load Bijection data requiring `ctx.auth` from Server
Components, Server Actions, or Route Handlers you need to use the Next.js
specific SDKs provided by Clerk and Auth0.

Additional `.env.local` configuration is needed for these hybrid SDKs.

#### Clerk

Start from a Next.js app with Bijection, such as the one
`bijection init my-app --template nextjs` creates, and follow the
[Clerk Next.js quickstart](https://clerk.com/docs/quickstarts/nextjs), a guide
from Clerk that includes steps for adding `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`
and `CLERK_SECRET_KEY` to the .env.local file. In Next.js 15, the
`<ClerkProvider>` component imported from the `@clerk/nextjs` package functions
as both a client and a server context provider so you probably won't need the
`ClerkProvider` from `@clerk/react`.

#### Auth0

See the
[Auth0 Next.js](https://auth0.com/docs/quickstart/webapp/nextjs/01-login) guide.

#### Other providers

Bijection uses JWT identity tokens on the client for live query subscriptions and
running mutations and actions, and on the Next.js backend for running queries,
mutations, and actions in server components and API routes.

Obtain the appropriate OpenID Identity JWT in both locations and you should be
able to use any auth provider. See
[Custom Auth](/auth/advanced/custom-auth) for more.