Next.js

Setup

Set up Hanzo Docs MDX for your Next.js application.

Installation

npm i @hanzo/docs-mdx @hanzo/docs-core @types/mdx

Create the configuration file:

source.config.ts

import { defineDocs, defineConfig } from '@hanzo/docs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
});

export default defineConfig();

Add the plugin to Next.js config:

next.config.mjs

import { createMDX } from '@hanzo/docs-mdx/next';

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

const withMDX = createMDX({
  // customise the config file path
  // configPath: "source.config.ts"
});

export default withMDX(config);

ESM Only

Hanzo Docs MDX is ESM-only, it's recommended to use next.config.mjs for accurate ESM resolution.

For TypeScript config file, it requires Native Node.js TypeScript Resolver, you can see Next.js docs for details.

Setup an import alias (recommended):

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@hanzo/docs-mdx:collections/*": [".source/*"]
    }
  }
}

Integrate with Hanzo Docs

You can create a lib/source.ts file and obtain Hanzo Docs source from the docs collection output.

lib/source.ts

import { docs } from '@hanzo/docs-mdx:collections/server';
import { loader } from '@hanzo/docs-core/source';

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});

The .source folder will be generated when you run next dev or next build.

Done

You can now write content in content/docs folder.

What is Next?

Accessing Collections

Learn how to access collection outputs.

Lazy Loading

Hit performance bottleneck? You can try lazy loading.