Next.js usage

Next adapter کو اس طرح تقسیم کیا گیا ہے:

ایک local 18ways.config.ts فائل
next.config.js میں build-time Next انٹیگریشن
@18ways/next/server سے server helpers
@18ways/next/client میں client helpers

Shared config

اپنی app root میں 18ways.config.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 میں:

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

App Router path routing

App Router کے لیے، locale routing خود route tree کے ذریعے define ہوتی ہے:

public localized routes app/[lang]/... کے تحت ہوتے ہیں
unlocalized routes [lang] کے باہر رہتے ہیں

Path Router path routing

اگر آپ path-based locale routing چاہتے ہیں، تو router: 'path' set کریں اور acceptedLocales فراہم کریں۔ پھر withWays() آپ کے لیے native Next i18n path routing configure کرتا ہے، اور Next کی automatic locale detection disabled ہوتی ہے تاکہ locale resolution کی ذمہ داری 18ways کے پاس رہے۔

// 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;

router: 'none' اس وقت استعمال کریں جب کوئی موجودہ routing layer پہلے ہی locale-aware URLs کی مالک ہو اور آپ صرف 18ways سے locale state manage کروانا چاہتے ہوں۔

Root layout

Import from @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>
  );
}

Proxy

App Router میں، root locale redirect اور domain canonicalization سنبھالنے کے لیے proxy.ts استعمال کریں:

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

اگر آپ کی app میں پہلے ہی اپنی proxy.ts یا middleware.ts موجود ہے، تو getWaysProxyResponse() کو compose کریں اور اسے اپنی app-specific logic کے باقی حصے سے پہلے return کریں:

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
}

Client-side locale changes

Use useLocale() from @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} />;
}

جب current route localized ہو، تو setLocale() route کو برقرار رکھتا ہے اور locale segment کو update کرتا ہے۔ جب current route unlocalized ہو، تو یہ route کو unlocalized ہی رکھتا ہے اور locale state کو update کرتا ہے۔

@18ways/next/client سے import کریں:

tsx

import { Link, useRouter, useUnlocalizedPathname } from '@18ways/next/client';

Link داخلی hrefs کو خودکار طور پر localize کرتا ہے
useRouter() وہی rules push() اور replace() پر لاگو کرتا ہے
useUnlocalizedPathname() سے آپ لوکل پری فکس کے بغیر روٹ اسٹیٹ کا موازنہ کر سکتے ہیں

locale override صرف تب استعمال کریں جب آپ کو کوئی انتخاب force کرنا ہو:

locale="fr-FR" ایک localized target کو force کرتا ہے
locale={false} ایک unlocalized target کو force کرتا ہے

Translated metadata

generateWaysMetadata() can translate string metadata fields for you.

tsx

export async function generateMetadata({ params }) {
  return generateWaysMetadata(
    (t) => ({
      title: t('Pricing'),
      description: t('Simple pricing for runtime translation'),
    }),
    { params, pathname: '/pricing' }
  );
}