Paggamit ng Next.js

Nahahati ang Next adapter sa:

isang lokal na 18ways.config.ts file
build-time na integrasyon ng Next sa next.config.js
server helpers mula sa @18ways/next/server
mga client helper sa @18ways/next/client

Shared config

Gumawa ng 18ways.config.ts sa app root mo.

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

Pagkatapos, sa iyong next.config.js:

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

App Router na pag-ruta ng path

Para sa App Router, ang locale routing ay tinutukoy mismo ng route tree:

nasa ilalim ng app/[lang]/... ang mga public localized route
nananatili sa labas ng [lang] ang mga unlocalized route

Path Router na pag-ruta ng path

Kung gusto mo ng path-based locale routing, itakda ang router: 'path' at magbigay ng acceptedLocales. Ang withWays() ay magko-configure na ng native Next i18n path routing para sa iyo, habang naka-disable ang awtomatikong locale detection ng Next para manatiling 18ways ang namamahala sa pagresolba ng locale.

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

Gamitin ang router: 'none' kapag may umiiral nang routing layer na siyang may-ari ng locale-aware URLs at gusto mo lang pamahalaan ng 18ways ang locale state.

Root layout

I-import mula sa @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

Sa App Router, gamitin ang proxy.ts para asikasuhin ang root locale redirect at anumang domain canonicalization:

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

Kung may sarili ka nang proxy.ts o middleware.ts, i-compose ang getWaysProxyResponse() at ibalik ito bago ang natitirang app-specific logic mo:

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
}

Mga pagbabago sa locale sa panig ng kliyente

Gamitin ang useLocale() mula sa @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} />;
}

Kapag naka-localize ang kasalukuyang route, pinananatili ng setLocale() ang route at ina-update ang locale segment. Kapag hindi naka-localize ang kasalukuyang route, pinananatili nitong unlocalized ang route at ina-update ang locale state.

Mag-import mula sa @18ways/next/client:

tsx

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

Awtomatikong nilo-localize ng Link ang mga internal href
Ipinapatupad ng useRouter() ang parehong mga panuntunan sa push() at replace()
useUnlocalizedPathname() ay nagbibigay-daan sa’yo na ikumpara ang estado ng ruta nang walang locale prefix

Gamitin lang ang override na locale kapag kailangan mong ipilit ang isang pagpili:

locale="fr-FR" ay pinipilit ang isang localized na target
locale={false} ay pinipilit ang isang unlocalized na target

Isinaling metadata

Maaaring i-translate ng generateWaysMetadata() ang mga string metadata field para sa iyo.

tsx

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