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

1. First, install the required packages:

   We have to install the following packages:

   • @content-collections/core
   • @content-collections/next
   npmyarnpnpmbun

   pnpm add --save-dev @content-collections/core @content-collections/next
   

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

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

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

   const { withContentCollections } = require("@content-collections/next");
   
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     // your next.js config
   };
   
   module.exports = withContentCollections(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

const { createContentCollectionPlugin } = require("@content-collections/next");

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

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

module.exports = 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

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

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

module.exports = withContentCollections(nextConfig);