Next.js Pages Router Setup

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

Prerequisites: Complete the Installation & Configuration first.

Add a Docs Page

Use a catch-all route inside pages/docs/[[...path]].tsx:

// pages/docs/[[...path]].tsx
import { docs } from "@/ariadocs";
import { MdxClient } from "@ariadocs/react";

export default function Docs({ serialized }) {
  return (
    <section>
      <MdxClient serialized={serialized} />
    </section>
  );
}

export const getServerSideProps = async ({ params }) => {
  const slug = (params?.path as string[]).join("/");
  const { serialized } = await docs.serialize({ slug });
  return { props: { serialized } };
};

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