Docs

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 anywhere.

Build the Page Tree.

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

Pages Structure

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

File

By default, it uses MDX and supports title and description frontmatter:

---
title: My Page
description: Best document ever
---
 
## Learn More

You may edit the configuration file to add additional properties.

Folder

You can use folders to organize multiple pages, the uppercased name of the folder will be used as the display name.

Separator

As you see, you can define a separator in meta by adding a item surrounded by ---.

Advanced

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

Rest

Tired to specify the order of every single page in meta.json? You can use ... to automatically add and sort remaining items.

Note: Index pages won't be included, you must specify the order of index.

{
  "title": "Folder",
  "pages": ["guide", "---Separator---", "..."]
}

Extract

You can extract the items from a folder with ...folder_name.

{
  "title": "Folder",
  "pages": ["guide", "...folder"]
}

Adding Icons

It is supported to have custom icons for a page or a folder. Add an icon property to the frontmatter or meta.json, and configure icon handler via resolveIcon option.

import { allDocs, allMeta } from 'contentlayer/generated'
import { createContentlayer } from 'next-docs-zeta/contentlayer'
 
export const { getPage, getPageUrl, tree } = createContentlayer(
  allMeta,
  allDocs,
  {
    resolveIcon: icon => {
      // load icon from library
      const res = require('lucide-react')
      icon = icon.trim()
 
      if (res[icon]) return createElement(res[icon])
      return undefined
    }
  }
)

Multiple Trees

You can build multiple trees by directly interacting with Pages Context API.

import { allDocs, allMeta } from 'contentlayer/generated'
import {
  buildPageTree,
  createUtils,
  loadContext
} from 'next-docs-zeta/contentlayer'
 
const ctx = loadContext(allMeta, allDocs)
 
const appTree = buildPageTree(ctx, {
  root: 'docs/app'
})
 
const pagesTree = buildPageTree(ctx, {
  root: 'docs/pages'
})
 
export const { getPage, getPageUrl } = createUtils(ctx)

Last updated on

Contentlayer

Internationalization

Configuration

On this page