1. Next.js configuration (next.config.mjs)
- MDX support: configured to handle .mdx files as pages
- Extensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
- MDX plugins: Code Hike for syntax highlighting and GFM for markdown
2. File-based routing structure
app/
├── layout.tsx → Root layout (wraps all pages)
├── page.tsx → Homepage (/)
└── docs/
├── layout.tsx → Docs layout (sidebar navigation)
├── page.mdx → /docs (main docs page)
├── navigation.ts → Navigation menu structure
└── [component-name]/
└── page.mdx → /docs/[component-name]
3. Route examples
- / → app/page.tsx (landing page)
- /docs → app/docs/page.mdx (main docs page)
- /docs/animated-number → app/docs/animated-number/page.mdx
- /docs/text-effect → app/docs/text-effect/page.mdx
- /docs/installation → app/docs/installation/page.mdx
4. Layout hierarchy
- Root layout (app/layout.tsx):
- Provides theme provider, fonts, global styles
- Wraps all pages
- Docs layout (app/docs/layout.tsx):
- Adds header, sidebar navigation, table of contents
- Only applies to routes under /docs/*