Quick Start

Introduction

Next Docs is a library that makes developing a Next.js docs easier, built for App Router. It offers server-side functions and headless components.

• Search (built-in: Flexsearch, Algolia Search)
• Breadcrumb, Sidebar, TOC Components
• Additional utilities

It's recommended to use Next Docs with Tailwind CSS + Radix UI, and Contentlayer (or any CMS).

npm install next-docs-zeta shiki

Demo

Open in CodeSandbox.

Guide

1. Choose a Source

   Next Docs has native support for ContentLayer, but any kind of formats and sources are allowed.

   You can refer to this guide to learn how to use Contentlayer with Next Docs.

2. Build Page Tree

   A page tree refers to structured data of all pages.

   export const tree = [
     {
       type: 'page',
       name: 'Quick Start',
       url: '/docs'
     },
     {
       type: 'separator',
       name: 'Guides'
     },
     {
       type: 'page',
       name: 'Example',
       url: '/docs/example'
     }
   ]

   You can generate the tree using our Contentlayer adapter, or end up with writing your own.

3. Create MDX file

   Create /content/docs/index.mdx:

   ---
   title: Quick Start
   description: My cool docs
   ---
    
   Hello World

4. Styling & Fun

   Start styling your docs with headless components provided by Next Docs.

   <article>
     <nav>
       <p>My App</p>
       <SearchToggle />
     </nav>
     <Sidebar />
     <MDXContent />
     <TOC />
   </article>

Enjoy!

Next Docs offers simple document searching as well as components for building a good docs. It is made for flexibility and speed.

Explore the full power of Next Docs: