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

# Module: nextjs

> Helpers for integrating Bijection into Next.js applications using server rendering.

Helpers for integrating Bijection into Next.js applications using server rendering.

This module contains:

1. [preloadQuery](/api/modules/nextjs#preloadquery), for preloading data for reactive client components.
2. [fetchQuery](/api/modules/nextjs#fetchquery), [fetchMutation](/api/modules/nextjs#fetchmutation) and [fetchAction](/api/modules/nextjs#fetchaction) for loading and mutating Bijection data
   from Next.js Server Components, Server Actions and Route Handlers.

## Usage

All exported functions assume that a Bijection deployment URL is set in the
`NEXT_PUBLIC_BIJECTION_URL` environment variable. `bijection dev` will
automatically set it during local development.

### Preloading data

Preload data inside a Server Component:

```typescript theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
import { preloadQuery } from "bijection/nextjs";
import { api } from "@/bijection/_generated/api";
import ClientComponent from "./ClientComponent";

export async function ServerComponent() {
  const preloaded = await preloadQuery(api.foo.baz);
  return <ClientComponent preloaded={preloaded} />;
}
```

And pass it to a Client Component:

```typescript theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
import { Preloaded, usePreloadedQuery } from "bijection/react";
import { api } from "@/bijection/_generated/api";

export function ClientComponent(props: {
  preloaded: Preloaded<typeof api.foo.baz>;
}) {
  const data = usePreloadedQuery(props.preloaded);
  // render `data`...
}
```

## Type Aliases

### NextjsOptions

Ƭ **NextjsOptions**: `Object`

Options to [preloadQuery](/api/modules/nextjs#preloadquery), [fetchQuery](/api/modules/nextjs#fetchquery), [fetchMutation](/api/modules/nextjs#fetchmutation) and [fetchAction](/api/modules/nextjs#fetchaction).

#### Type declaration

| Name | Type | Description |
| :- | :- | :- |
| `token?` | `string` | The JWT-encoded OpenID Connect authentication token to use for the function call. |
| `url?` | `string` | The URL of the Bijection deployment to use for the function call. Defaults to `process.env.NEXT_PUBLIC_BIJECTION_URL` if not provided. Explicitly passing undefined here (such as from missing ENV variables) will throw an error in the future. |
| `skipBijectionDeploymentUrlCheck?` | `boolean` | Skip validating that the Bijection deployment URL looks like `https://happy-animal-123.bijection.cloud` or localhost. This can be useful if running a self-hosted Bijection backend that uses a different URL. The default value is `false` |

## Functions

### preloadQuery

▸ **preloadQuery**\<`Query`>(`query`, `...args`): `Promise`\<[`Preloaded`](/api/modules/react#preloaded)\<`Query`>>

Execute a Bijection query function and return a `Preloaded`
payload which can be passed to [usePreloadedQuery](/api/modules/react#usepreloadedquery) in a Client
Component.

#### Type parameters

| Name | Type |
| :- | :- |
| `Query` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"query"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"query"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `query` | `Query` | a [FunctionReference](/api/modules/server#functionreference) for the public query to run like `api.dir1.dir2.filename.func`. |
| `...args` | [`ArgsAndOptions`](/api/modules/server#argsandoptions)\<`Query`, [`NextjsOptions`](/api/modules/nextjs#nextjsoptions)> | The arguments object for the query. If this is omitted, the arguments will be `{}`. |

#### Returns

`Promise`\<[`Preloaded`](/api/modules/react#preloaded)\<`Query`>>

A promise of the `Preloaded` payload.

***

### preloadedQueryResult

▸ **preloadedQueryResult**\<`Query`>(`preloaded`): [`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Query`>

Returns the result of executing a query via [preloadQuery](/api/modules/nextjs#preloadquery).

#### Type parameters

| Name | Type |
| :- | :- |
| `Query` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"query"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"query"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `preloaded` | [`Preloaded`](/api/modules/react#preloaded)\<`Query`> | The `Preloaded` payload returned by [preloadQuery](/api/modules/nextjs#preloadquery). |

#### Returns

[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Query`>

The query result.

***

### fetchQuery

▸ **fetchQuery**\<`Query`>(`query`, `...args`): `Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Query`>>

Execute a Bijection query function.

#### Type parameters

| Name | Type |
| :- | :- |
| `Query` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"query"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"query"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `query` | `Query` | a [FunctionReference](/api/modules/server#functionreference) for the public query to run like `api.dir1.dir2.filename.func`. |
| `...args` | [`ArgsAndOptions`](/api/modules/server#argsandoptions)\<`Query`, [`NextjsOptions`](/api/modules/nextjs#nextjsoptions)> | The arguments object for the query. If this is omitted, the arguments will be `{}`. |

#### Returns

`Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Query`>>

A promise of the query's result.

***

### fetchMutation

▸ **fetchMutation**\<`Mutation`>(`mutation`, `...args`): `Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Mutation`>>

Execute a Bijection mutation function.

#### Type parameters

| Name | Type |
| :- | :- |
| `Mutation` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"mutation"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"mutation"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `mutation` | `Mutation` | A [FunctionReference](/api/modules/server#functionreference) for the public mutation to run like `api.dir1.dir2.filename.func`. |
| `...args` | [`ArgsAndOptions`](/api/modules/server#argsandoptions)\<`Mutation`, [`NextjsOptions`](/api/modules/nextjs#nextjsoptions)> | The arguments object for the mutation. If this is omitted, the arguments will be `{}`. |

#### Returns

`Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Mutation`>>

A promise of the mutation's result.

***

### fetchAction

▸ **fetchAction**\<`Action`>(`action`, `...args`): `Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Action`>>

Execute a Bijection action function.

#### Type parameters

| Name | Type |
| :- | :- |
| `Action` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"action"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"action"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `action` | `Action` | A [FunctionReference](/api/modules/server#functionreference) for the public action to run like `api.dir1.dir2.filename.func`. |
| `...args` | [`ArgsAndOptions`](/api/modules/server#argsandoptions)\<`Action`, [`NextjsOptions`](/api/modules/nextjs#nextjsoptions)> | The arguments object for the action. If this is omitted, the arguments will be `{}`. |

#### Returns

`Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Action`>>

A promise of the action's result.