Next.js का उपयोग

Next adapter को निम्न भागों में बाँटा गया है:

  • एक स्थानीय 18ways.config.ts फ़ाइल
  • next.config.js में बिल्ड-टाइम Next इंटीग्रेशन
  • @18ways/next/server से सर्वर हेल्पर्स
  • @18ways/next/client में client helpers

साझा कॉन्फ़िगरेशन

अपने ऐप रूट में 18ways.config.ts बनाएं।

ts
// 18ways.config.ts
import type { WaysConfig } from '@18ways/next/config';
 
export default {
  apiKey: process.env.NEXT_PUBLIC_18WAYS_PUBLIC_API_KEY,
  baseLocale: 'en-GB',
  router: 'app', // 'app', 'path', or 'none' depending on if you use app router, path router, or if you don't want the router to sync with locale at all
} satisfies WaysConfig;

फिर, अपनी next.config.js में:

ts
// next.config.js
const { withWays } = require('@18ways/next/config');
 
module.exports = withWays({
  // your normal next config here
});

ऐप राउटर पथ रूटिंग

App Router के लिए, locale routing route tree द्वारा ही परिभाषित होती है:

  • सार्वजनिक स्थानीयकृत रूट्स app/[lang]/... के अंतर्गत रहते हैं
  • अस्थानीयकृत रूट्स [lang] के बाहर रहते हैं

पाथ राउटर पाथ रूटिंग

यदि आप पाथ-आधारित लोकेल रूटिंग चाहते हैं, तो router: 'path' सेट करें और acceptedLocales प्रदान करें। withWays() फिर आपके लिए नेटीव Next i18n पाथ रूटिंग कॉन्फ़िगर करता है, और Next की स्वचालित लोकेल डिटेक्शन को बंद कर दिया जाता है ताकि 18ways लोकेल रेज़ोल्यूशन का नियंत्रण अपने हाथ में रखे।

ts
// 18ways.config.ts
import type { WaysConfig } from '@18ways/next/config';
 
export default {
  apiKey: process.env.NEXT_PUBLIC_18WAYS_PUBLIC_API_KEY,
  baseLocale: 'en-GB',
  router: 'path', // 'app', 'path', or 'none' depending on if you use app router, path router, or if you don't want the router to sync with locale at all
  acceptedLocales: ['en-GB', 'fr-FR'], // keep this in sync with the languages enabled in your 18ways dashboard
} satisfies WaysConfig;

जब कोई मौजूदा रूटिंग लेयर पहले से ही locale-aware URLs का स्वामित्व रखती है और आप केवल 18ways से locale state को मैनेज कराना चाहते हैं, तब router: 'none' का उपयोग करें.

रूट लेआउट

@18ways/next/server से इम्पोर्ट करें।

tsx
import { WaysRoot, htmlAttrs } from '@18ways/next/server';
 
export default async function RootLayout({ children, params }) {
  const attrs = await htmlAttrs({ params });
 
  return (
    <html {...attrs}>
      <body>
        <WaysRoot params={params}>{children}</WaysRoot>
      </body>
    </html>
  );
}

प्रॉक्सी

App Router में, रूट locale redirect और किसी भी domain canonicalization को संभालने के लिए proxy.ts का उपयोग करें:

ts
export { default, config } from '@18ways/next/proxy';

अगर आपके ऐप में पहले से अपनी proxy.ts या middleware.ts है, तो getWaysProxyResponse() को compose करें और उसे अपने ऐप-विशिष्ट बाकी लॉजिक से पहले return करें:

ts
import type { NextFetchEvent, NextRequest } from 'next/server';
import { getWaysProxyResponse } from '@18ways/next/proxy';
 
export default async function middleware(request: NextRequest, event: NextFetchEvent) {
  const waysResponse = await getWaysProxyResponse(request);
  if (waysResponse) {
    return waysResponse;
  }
 
  // your existing middleware logic
}

क्लाइंट-साइड लोकल परिवर्तनों

useLocale() का उपयोग @18ways/next/client से करें.

tsx
'use client';
 
import { LanguageSwitcher } from '@18ways/react';
import { useLocale } from '@18ways/next/client';
 
export function LocaleControls() {
  const { locale, setLocale } = useLocale();
 
  return <LanguageSwitcher currentLocale={locale} onLocaleChange={setLocale} />;
}

जब वर्तमान रूट स्थानीयकृत होता है, तो setLocale() रूट को सुरक्षित रखता है और लोकेल सेगमेंट को अपडेट करता है। जब वर्तमान रूट अस्थानीयकृत होता है, तो यह रूट को अस्थानीयकृत ही रखता है और लोकेल स्थिति को अपडेट करता है।

@18ways/next/client से इम्पोर्ट करें:

tsx
import { Link, useRouter, useUnlocalizedPathname } from '@18ways/next/client';
  • Link आंतरिक hrefs को अपने-आप स्थानीयकृत करता है
  • useRouter() push() और replace() पर समान नियम लागू करता है
  • useUnlocalizedPathname() आपको लोकेल प्रीफ़िक्स के बिना रूट स्टेट की तुलना करने देता है

locale ओवरराइड का उपयोग केवल तब करें जब आपको कोई विकल्प मजबूरन चुनवाना हो:

  • locale="fr-FR" एक स्थानीयकृत लक्ष्य को बाध्य करता है
  • locale={false} एक अनुवाद-रहित लक्ष्य को मजबूर करता है

अनूदित मेटाडेटा

generateWaysMetadata() आपके लिए स्ट्रिंग मेटाडेटा फ़ील्ड्स का अनुवाद कर सकता है।

tsx
export async function generateMetadata({ params }) {
  return generateWaysMetadata(
    (t) => ({
      title: t('Pricing'),
      description: t('Simple pricing for runtime translation'),
    }),
    { params, pathname: '/pricing' }
  );
}
Next.js उपयोग