Next.js App Router Setup

Getting started with Ariadocs in a Next.js App Router project is simple. Below you’ll find the step-by-step setup—from installation to rendering your docs.

1. Install the dependency

First, add the Ariadocs React package:

pnpm add @ariadocs/react

2. Configure Ariadocs

Create a config file at the root of your project (e.g. ariadocs.ts). This is where you’ll tell Ariadocs where your content lives and which plugins to use.

// ariadocs.ts
import { type DocsConfigLocal, LocalDocs } from "@ariadocs/react/core";
import {
  recommendedRehypePlugins,
  recommendedRemarkPlugins,
} from "@ariadocs/react/utils";

export const docsConfig: DocsConfigLocal = {
  contentDir: "/contents/docs",
  rehypePlugins: recommendedRehypePlugins, // optional
  remarkPlugins: recommendedRemarkPlugins, // optional
};

type F = { title: string };
export const docs = new LocalDocs<F>(docsConfig);

• contentDir → path to your docs folder
• rehypePlugins / remarkPlugins → recommended markdown enhancements out of the box
• LocalDocs → instance that manages your local markdown/MDX files

3. Render a Docs Page

Next, set up a dynamic route inside your App Router (app/docs/[[...path]]/page.tsx). This allows any path under /docs/* to automatically load the right markdown file.

// app/docs/[[...path]]/page.tsx
import { docs } from "@/ariadocs";

export default async function Docs({
  params,
}: {
  params: Promise<{ path: string[] }>;
}) {
  const slug = (await params).path.join("/");
  const { MDX, frontmatter } = await docs.parse({ slug });

  return (
    <section>
      <title>{frontmatter.title}</title>
      {MDX}
    </section>
  );
}

Here’s what’s happening:

• We grab the slug from the URL.
• Ariadocs parses the matching file and gives back the frontmatter and compiled MDX.
• You render the content directly inside your page.

4. Add generateStaticParams

To enable static site generation (SSG), include generateStaticParams. This tells Next.js what paths to pre-render at build time.

export async function generateStaticParams() {
  const rawPaths = await docs.pagePaths();
  // slice(1) removes the leading slash
  return rawPaths.map((str) => ({ path: str.split("/").slice(1) }));
}

That’s it—your docs are now statically generated and blazing fast 🚀.

5. Create Your First Doc

Inside your project, add a single doc file:

root/
├── app/
│   └── docs/
│       └── [[...path]]/
|            └── page.tsx
├── contents/
│   └── docs/
│       └── hello-world.mdx
├── ariadocs.ts

Example: hello-world.mdx

---
title: Hello World
---

# Hello World 👋

This is your **first Ariadocs page**.

5. Run the App

Start the dev server:

pnpm dev

Then open 👉 http://localhost:3000/docs/hello-world

You should see your very first doc live! 🎉