Configuration

Learn how to use Contentlayer with Next Docs

Next Docs has native support for Contentlayer, and provides default configuration with required MDX plugins.

Setup

Edit your configuration.

contentlayer.config.ts

import { makeSource } from 'contentlayer/source-files';
import { defaultConfig } from 'next-docs-zeta/contentlayer/configuration';
 
export default makeSource(defaultConfig);

Note

Configuration file shouldn't be imported in anywhere.

Build the Page Tree.

import { allDocs, allMeta } from 'contentlayer/generated';
import { createContentlayer } from 'next-docs-zeta/contentlayer';
 
export const { getPage, tree } = createContentlayer(allMeta, allDocs);

Pages Structure

All files are located in /content and /content/docs for documentation pages.

Pages Structure

Learn how to structure your pages

Advanced

Next Docs Zeta also adds extra functionalities to Contentlayer, making it more convenient to use and straightforward.

Adding Icons

Configure icon handler via resolveIcon option.

import { allDocs, allMeta } from 'contentlayer/generated'
import { createContentlayer } from 'next-docs-zeta/contentlayer'
 
export const { getPage, tree } = createContentlayer(
  allMeta,
  allDocs,
  {
    resolveIcon: icon => ...
  }
)

Configuration

Setup

Pages Structure

Pages Structure

Advanced

Adding Icons

On this page