Next.js 15 ऐप राउटरटाइपस्क्रिप्टMultilipi गेटवे

डॉकट्यून्स दस्तावेज़ीकरण स्टार्टर किट

आधुनिक डेवलपर डॉक्स के निर्माण, एज रूटिंग मिडलवेयर को कॉन्फ़िगर करने और स्वचालित बहु-भाषी उप-प्रॉक्सी अनुवाद स्थापित करने के लिए पूर्ण गाइड।

शुरुआत करना

हमारे टाइपस्क्रिप्ट स्टार्टर किट के साथ अपने नए दस्तावेज़ीकरण पोर्टल को बूटस्ट्रैप करने के लिए, अपने टर्मिनल में निम्न कमांड निष्पादित करें:

टर्मिनल कमांड
# क्लोन करें और निर्भरताएँ स्थापित करें
git clone https://github.com/doctunes/documentation-starter-kit.git my-docs
cd my-docs
npm install

# localhost:3000 पर विकास सर्वर प्रारंभ करें
npm run dev
परियोजना निर्देशिका लेआउट:
  • middleware.ts — ग्लोबल बहु-भाषा उप-प्रॉक्सी रीराइट हैंडलर
  • app/layout.tsx — ग्लोबल एचटीएमएल शेल, फ़ॉन्ट घोषणाएँ और नेवबार/फ़ुटर
  • app/page.tsx — लैंडिंग पेज और इंटरैक्टिव हीरो
  • app/docs/page.tsx — मुख्य दस्तावेज़ीकरण हब
  • app/playground/page.tsx — इंटरैक्टिव रूटिंग सिम्युलेटर
  • components/ — पुन: प्रयोज्य CodeBlock, Navbar, SearchModal, आदि।

बहु-भाषा मिडलवेयर

हमारे अंतर्राष्ट्रीयकरण इंजन का दिल एज है middleware.ts जो प्रोजेक्ट के रूट में स्थित है। यह सभी आने वाले अनुरोधों को रोकता है, 80+ भाषा उपसर्ग रेग एक्स के विरुद्ध परीक्षण करता है, और अनुवाद प्रॉक्सी के लिए अनुरोध को सुरक्षित रूप से फिर से लिखता है।

middleware.ts (रूट एज मिडलवेयर)
1import { NextRequest, NextResponse } from 'next/server'
2
3const 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
8export 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
23export const config = { matcher: '/:path*' }
रीराइट कैसे काम करते हैं

मानक HTTP 301/302 रीडायरेक्ट के विपरीत, NextResponse.rewrite() बैकएंड प्रॉक्सी ओरिजिन को संशोधित करता है जबकि उपयोगकर्ता ब्राउज़र एड्रेस बार में सटीक URL को पूरी तरह से बरकरार रखता है।

उप-प्रॉक्सी हेडर

जब इस पर फिर से लिखा जाता है https://sub-proxy.multilipi.com, सटीक टेनेंट अलगाव और अनुवाद मोड सुनिश्चित करने के लिए दो अनिवार्य हेडर इंजेक्ट किए जाते हैं:

हेडर का नाममानउद्देश्य
X-Translation-Modeसब-डायरेक्टरीMultilipi अनुवाद इंजन को निर्देश देता है कि वह अग्रणी पथ से लोकेल को पार्स करे।
X-Original-Hostdivanshu.doctunes.ioSSL और लाइसेंस सत्यापन के लिए पंजीकृत मूल डोमेन निर्दिष्ट करता है।

समर्थित लोकेल (80+)

रेगुलर एक्सप्रेशन सामान्य 2-अक्षर भाषा कोड (जैसे es, de, fr) और स्थानीय क्षेत्रीय बोली टैग (जैसे zh-hans, pt-br, sr-cyrl):

/en-us/
/es-es/
/fr-fr/
/de-de/
/zh-hans/
/zh-hant/
/ja/
/hi/
/ar/
/pt-br/
/ru/
/ko/
/it/
/nl/
/sv/
/pl/
/tr/
/vi/
/th/
/el/
/cs/
/da/
/fi/
/he/

+ 50 से अधिक अतिरिक्त वैश्विक भाषाएँ गतिशील रूप से मेल खाती हैं।

यूआई घटक और कोडब्लॉक

हर पेज में प्री-स्टाइल डार्क मोड UI कंपोनेंट्स शामिल हैं जैसे कॉपी करने योग्य कोड ब्लॉक, रिस्पॉन्सिव टेबल, कॉलआउट बैनर और मोडल डायलॉग।

components/ExampleUsage.tsx
import CodeBlock from '@/components/CodeBlock'

export default function MyDocs() {
  return (
    

Installation

) }

एपीआई संदर्भ

DocTunes प्रोग्रामेटिक रूप से लोकेल कॉन्फ़िगरेशन का निरीक्षण करने के लिए REST और एज हेल्पर फ़ंक्शन प्रदान करता है:

GET /api/v1/locales200 OK

सक्रिय सब-प्रॉक्सी लोकेल, स्थिति और लक्ष्य होस्टनाम की सूची लौटाता है।

json
{
  "status": "online",
  "gateway": "https://sub-proxy.Multilipi.com",
  "originalHost": "divanshu.doctunes.io",
  "totalLocales": 84,
  "defaultLocale": "hi"
}

परिनियोजन गाइड

अपने प्रोजेक्ट को तुरंत Vercel, AWS Amplify, Cloudflare Pages, या स्व-होस्टेड डॉकर कंटेनर पर डिप्लॉय करें:

Vercel CLI डिप्लॉयमेंट
# कस्टम एनवायरनमेंट के साथ प्रोडक्शन में डिप्लॉय करें
npx vercel --prod