Fuma Content - Next.js

Installation

npm i fuma-content

Update your Next.js config:

next.config.mjs

import { createContent } from "fuma-content/next";

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
};

const withContent = await createContent();

export default withContent(config);

Create a config file to define collections:

content.config.ts (Example)

import { defineConfig } from "fuma-content/config";
import { mdxCollection } from "fuma-content/collections/mdx";

const docs = mdxCollection({
  dir: "content/docs",
});

export default defineConfig({
  collections: { docs },
});

Each collection generates its files in the .content folder, it's recommended to add a path alias:

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "content/*": ["./.content/*"]
    }
  }
}

Fuma Content is now configured, start the dev server (next dev) to see the generated types.

Usage

You can access the collections, such as the MDX collection you defined:

import { docs } from "content/docs";

console.log(docs.list());

Learn More

See below for usage of built-in collections:

Next.js

Installation

Usage

Learn More

Data Collection

MDX Collection

Custom

On this page