---
title: Next.js
---

The `@content-collections/next` package allows a seamless integration of Content Collections into your Next.js app. This package provides a Next.js plugin that will automatically generate the content collections and add them to the build process.

## Installation

<div className='steps'>

<div className='step'>

First, install the required packages:

We have to install the following packages:

- `@content-collections/core`
- `@content-collections/next`

```package-install
npm i @content-collections/core @content-collections/next -D
```

</div>
<div className='step'>

After installation we have to add a path alias for the generated collections to the `tsconfig.json`:

```json
{
  "compilerOptions": {
    // ...
    "paths": {
      "@/*": ["./*"],
      "content-collections": ["./.content-collections/generated"]
    }
  }
}
```

</div>
<div className='step'>

Now we can add the Content Collections plugin to the Next.js config:

<Tabs groupId="typof-next-config" items={["next.config.mjs", "next.config.js", "next.config.ts"]} persist>
<Tab value="next.config.mjs">

```js
import { withContentCollections } from "@content-collections/next";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // your next.js config
};

export default withContentCollections(nextConfig);
```

</Tab>
<Tab value="next.config.js">

```js
const { withContentCollections } = require("@content-collections/next");

/** @type {import('next').NextConfig} */
const nextConfig = {
  // your next.js config
};

module.exports = withContentCollections(nextConfig);
```

</Tab>
<Tab value="next.config.ts">

```ts
import type { NextConfig } from "next";
import { withContentCollections } from "@content-collections/next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default withContentCollections(nextConfig);
```

</Tab>
</Tabs>

<Callout type="warn" title="Warning">

Ensure that `withContentCollections` is the last plugin in the chain.
This is important because the plugin returns a `Promise`, which is compatible with
[Next.js](https://nextjs.org/docs/messages/promise-in-next-config#possible-ways-to-fix-it), but other plugins
may not expect this behavior.

<Wrong>

```ts
withNextIntl(withContentCollections(nextConfig));
```

</Wrong>
<Correct>

```ts
withContentCollections(withNextIntl(nextConfig));
```

</Correct>

</Callout>

</div>
</div>

## API

The package exports the following functions:

### `createContentCollectionPlugin`

A function that creates the Next.js plugin for Content Collections.

### `withContentCollections`

A functions which uses the `createContentCollectionPlugin` with a the default options.

In most cases, you will only need to use the `withContentCollections` function.

### `createContentCollectionPlugin`

The function accepts one argument, an options object with the following properties. It then returns a function that takes the Next.js configuration object and provides a new configuration object with the Content Collections plugin included.

- `configPath` (required): Specifies the path to the Content Collections configuration file.

#### Example

```js
import { createContentCollectionPlugin } from "@content-collections/next";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // your next.js config
};

const withPlugin = createContentCollectionPlugin({
  configPath: "./config/content-collections.config.ts",
});

export default withPlugin(nextConfig);
```

### `withContentCollections`

The function takes a single argument, a Next.js configuration object, and returns a new configuration object with the Content Collections plugin added.

#### Example

```js
import { withContentCollections } from "@content-collections/next";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // your next.js config
};

export default withContentCollections(nextConfig);
```
