Quick Start

Getting Started with Next Docs UI

Next Docs UI is the Next.js framework for building documentation website. Built on the top of Next.js, Radix UI and Next Docs Zeta.

Automatic Installation

Create a new app with create-next-docs-app.

npx create-next-docs-app
# or
pnpm create next-docs-app
# or
yarn create next-docs-app

Manual Installation

Create a new Next.js application with create-next-app, and install required packages.

npm install next-docs-ui next-docs-zeta

Configuration

Next Docs UI is unopinionated and doesn't provide content management features. You can choose a source you prefer, such as Contentlayer and next-docs-mdx.

This is a list of sources supported by Next Docs:

You have to configure the library correctly following their setup guide before continuing.

Styles

You can import the pre-built stylesheet in the root layout.

import 'next-docs-ui/style.css';

For Tailwind CSS projects, you may use the official plugin instead.

It doesn't come with a default font, you may choose one from next/font.

Root Layout

Wrap the entire application inside Root Provider.

import { RootProvider } from 'next-docs-ui/provider';
import type { ReactNode } from 'react';
 
export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

Layout

Create a new catch-all route for our docs, and give it a proper layout.

app/docs/[[...slug]]/layout.tsx
import { DocsLayout } from 'next-docs-ui/layout';
import type { ReactNode } from 'react';
 
export default function RootDocsLayout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout tree={tree} nav={{ title: 'My App' }}>
      {children}
    </DocsLayout>
  );
}

tree refers to Page Tree, which should be provided by your data source.

Page

For the page.tsx, it may vary depending on your source. You should manually configure static rendering with generateStaticParams and metadata with generateMetadata.

Make sure to wrap your content in the Page component, this will also configure typography styles.

By default, it uses the built-in document search based on Flexsearch. Learn to configure Document Search for your data source.

Enjoy!

Now, Create your first mdx file in the docs folder.

content/docs/index.mdx
---
title: Hello World
---
 
## Yo what's up

Run the app in development mode and see http://localhost:3000/docs.

npm run dev

FAQ

Demo

Open in CodeSandbox.

Learn More

Page Structure

Learn how to structure your pages

Learn I18n

Learn how to implement I18n

Theming

Add themes to Next Docs UI

Code Block

Learn how to use code blocks in MDX

Last updated on

Comparisons

On this page

Automatic InstallationManual InstallationConfigurationStylesRoot LayoutLayoutPageSearchEnjoy!FAQDemoLearn More
Edit on Github