Kit de démarrage de documentation DocTunes
Guide complet pour construire des docs de développeur modernes, configurer un middleware de routage en périphérie et mettre en place des traductions automatisées multilingues par sous-proxy.
Pour commencer
Pour initialiser votre nouveau portail de documentation avec notre kit de démarrage TypeScript, exécutez la commande suivante dans votre terminal :
# Cloner et installer les dépendances
git clone https://github.com/doctunes/documentation-starter-kit.git my-docs
cd my-docs
npm install
# Démarrer le serveur de développement sur localhost:3000
npm run dev- middleware.ts — Gestionnaire de réécriture de sous-proxy multilingue global
- app/layout.tsx — Coque HTML globale, déclarations de polices et barre de navigation/pied de page
- app/page.tsx — Page d'atterrissage et héros interactif
- app/docs/page.tsx — Hub de documentation principal
- app/playground/page.tsx — Simulateur de routage interactif
- components/ — CodeBlock, Navbar, SearchModal réutilisables, etc.
Middleware multi-langue
Le cœur de notre moteur d'internationalisation est le edge middleware.ts placé à la racine du projet. Il intercepte toutes les requêtes entrantes, teste par rapport à une regex de préfixe de plus de 80 langues, et réécrit en toute sécurité la requête vers le proxy de traduction.
| 1 | import { NextRequest, NextResponse } from 'next/server' |
| 2 | |
| 3 | const LANGUAGE_PATH = new RegExp( |
| 4 | '^/(?:mn-mong|sr-cyrl|sr-latn|zh-hans|zh-hant|es-419|en-us|en-gb|en-ca|en-au|fr-fr|fr-ca|fr-be|fr-ch|de-de|de-at|de-ch|pt-pt|pt-br|es-es|mww|af|sq|am|ar|hy|as|az|ba|eu|bn|bs|pt|bg|ca|hr|cs|da|dv|nl|en|et|fo|fj|fl|fi|fr|gl|ka|de|el|gu|ht|ha|he|hi|hu|is|ig|id|iu|ga|it|ja|kn|kk|rw|ko|ku|ky|lo|lv|ln|lt|lg|mk|mg|ms|ml|mt|mr|ne|no|or|ps|fa|pl|pa|ro|ru|sm|sd|si|sk|sl|so|es|sw|sv|ty|ta|tt|te|th|bo|ti|to|tr|tk|uk|ur|ug|uz|vi|cy|xh|yo|zu)(?:/|$)', |
| 5 | 'i' |
| 6 | ) |
| 7 | |
| 8 | export function middleware(request: NextRequest) { |
| 9 | if (!LANGUAGE_PATH.test(request.nextUrl.pathname)) { |
| 10 | return NextResponse.next() |
| 11 | } |
| 12 | |
| 13 | const destination = new URL( |
| 14 | request.nextUrl.pathname + request.nextUrl.search, |
| 15 | 'https://sub-proxy.Multilipi.com' |
| 16 | ) |
| 17 | const headers = new Headers(request.headers) |
| 18 | headers.set('X-Translation-Mode', 'sub-directory') |
| 19 | headers.set('X-Original-Host', 'divanshu.doctunes.io') |
| 20 | return NextResponse.rewrite(destination, { request: { headers } }) |
| 21 | } |
| 22 | |
| 23 | export const config = { matcher: '/:path*' } |
Contrairement aux redirections HTTP 301/302 standard, NextResponse.rewrite() modifie l'origine du proxy backend tout en gardant l'URL exacte dans la barre d'adresse du navigateur de l'utilisateur complètement intacte.
En-têtes de sous-proxy
Lors de la réécriture vers https://sub-proxy.multilipi.com, deux en-têtes obligatoires sont injectés pour assurer une isolation précise du locataire et un mode de traduction :
| Nom de l'en-tête | Valeur | Objectif |
|---|---|---|
| X-Translation-Mode | sous-répertoire | Indique au moteur de traduction Multilipi d'analyser la locale à partir du chemin principal. |
| X-Original-Host | divanshu.doctunes.io | Spécifie le domaine d'origine enregistré pour la validation SSL et des licences. |
Locales prises en charge (80+)
L'expression régulière gère à la fois les codes de langue génériques à 2 lettres (par exemple es, de, fr) et les balises de dialecte régional localisées (par exemple zh-hans, pt-br, sr-cyrl):
+ plus de 50 langues mondiales supplémentaires prises en charge dynamiquement.
Composants d'interface et blocs de code
Chaque page comprend des composants d'interface utilisateur en mode sombre pré-stylisés tels que des blocs de code copiables, des tableaux responsifs, des bannières d'alerte et des boîtes de dialogue modales.
import CodeBlock from '@/components/CodeBlock'
export default function MyDocs() {
return (
Installation
Référence API
DocTunes fournit des fonctions d'assistance REST et Edge pour inspecter par programmation les configurations de paramètres régionaux :
Renvoie la liste des paramètres régionaux actifs du sous-proxy, leur statut et le nom d'hôte cible.
{
"status": "online",
"gateway": "https://sub-proxy.Multilipi.com",
"originalHost": "divanshu.doctunes.io",
"totalLocales": 84,
"defaultLocale": "en"
}Guide de déploiement
Déployez votre projet instantanément sur Vercel, AWS Amplify, Cloudflare Pages ou des conteneurs Docker auto-hébergés :
# Déployer en production avec un environnement personnalisé
npx vercel --prod