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

npm i @content-collections/core @content-collections/next -D

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

import { withContentCollections } from "@content-collections/next";
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // your next.js config
};
 
export default withContentCollections(nextConfig);

withNextIntl(withContentCollections(nextConfig));

withContentCollections(withNextIntl(nextConfig));

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

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

import { withContentCollections } from "@content-collections/next";
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // your next.js config
};
 
export default withContentCollections(nextConfig);