A clean, bilingual (FR/EN) internal documentation site built with Next.js. Designed to be reusable - adapt it to any team or company by editing the markdown files and a few config values.
- Next.js 16 - App Router, Turbopack
- next-intl - FR/EN routing & translations
- next-themes - Dark / light mode
- MDX + rehype-pretty-code - Syntax-highlighted code blocks
- Tailwind CSS v4 + shadcn/ui - Styling & components
- remark-gfm - GitHub Flavored Markdown (tables, strikethrough…)
- Bilingual routing (
/fr/...and/en/...) with a custom language switcher - Dark / light mode with system preference detection
- Sidebar navigation with active link highlighting
- macOS-style code blocks with syntax highlighting (Shiki)
- shadcn
Tablecomponent for clean data tables - Fully typed with TypeScript
app/
[locale]/
docs/[slug]/ ← doc pages (reads .md files)
page.tsx ← home / hero
components/ ← navbar, sidebar, footer, lang-switcher…
lib/
get-doc.ts ← MDX compiler + rehype pipeline
mdx-components.tsx ← custom MDX component overrides
messages/
fr.json ← French translations
en.json ← English translations
.github/docs/
fr/ ← French markdown doc files
en/ ← English markdown doc files
pnpm install
pnpm devOpen http://localhost:3000.
- Add a
.mdfile in.github/docs/fr/and.github/docs/en/ - Add the slug mapping in
lib/get-doc.ts(SLUG_MAP) if the filename differs from the URL slug - Add the nav entry in
components/sidebar.tsxand translations inmessages/*.json
Note: The doc files live outside the Next.js project root. After editing them, restart the dev server for changes to appear (Turbopack does not watch them).
| What | Where |
|---|---|
| Site name & nav labels | messages/fr.json + messages/en.json |
| Logo / brand icon | components/navbar.tsx + components/footer.tsx |
| Contact email | components/footer.tsx |
| Brand colors | app/globals.css (--primary variable) |
| Supported locales | i18n/routing.ts |
Segal G. - segal-portfolio.vercel.app