Next.js App Router Setup

Getting started with Ariadocs in a Next.js App Router project is simple.

Prerequisites: Complete the Installation & Configuration first.

Render a Docs Page

Create a dynamic route inside your App Router app/docs/[[...path]]/page.tsx:

// 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>
  );
}

Add generateStaticParams

To enable static site generation (SSG):

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

Create Your First Doc

contents/docs/hello-world.mdx

---
title: Hello World
---

# Hello World

This is your **first Ariadocs page**.

Run the App

pnpm dev

Open http://localhost:3000/docs/hello-world