Paggamit ng Next.js

Ang Next adapter ay hinahati sa:

  • isang lokal na 18ways.config.ts na file
  • integrasyon ng Next sa oras ng pagbuo sa next.config.js
  • mga server helper mula sa @18ways/next/server
  • mga client helper sa @18ways/next/client

Nahahating config

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

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;

Pagkatapos, sa iyong next.config.js:

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

Pag-ruta ng path sa App Router

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

  • Ang mga public localized route ay nasa ilalim ng app/[lang]/...
  • Ang mga hindi naisalokal na ruta ay nananatili sa labas ng [lang]

Ruta ng Path Router na pagruruta ng path

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

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;

Gamitin ang router: 'none' kapag ang ilang umiiral nang routing layer na ang may hawak sa mga URL na may locale awareness, at gusto mo lang ng 18ways na pamahalaan ang locale state.

Pangunahing layout

Mag-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 hawakan ang root locale redirect at anumang domain canonicalization:

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

Kung mayroon nang sarili nitong proxy.ts o middleware.ts ang app mo, i-compose ang getWaysProxyResponse() at ibalik ito bago ang natitirang logic na partikular sa app mo:

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
}

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 ruta, pinananatili ng setLocale() ang ruta at ina-update ang segment ng locale. Kapag hindi naka-localize ang kasalukuyang ruta, pinananatili nitong hindi naka-localize ang ruta at ina-update ang state ng locale.

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

tsx
import { Link, useRouter, useUnlocalizedPathname } from '@18ways/next/client';
  • Awtomatiko nitong ginagawang lokal ang mga internal na href
  • useRouter() ay nagpapairal ng parehong mga tuntunin sa push() at replace()
  • Hinahayaan ka ng useUnlocalizedPathname() na ikumpara ang estado ng ruta nang walang unlapi ng locale

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

  • locale="fr-FR" ay pinipilit ang isang naka-localize na target
  • locale={false} ay pinipilit ang isang target na hindi naka-localize

Isinaling metadata

Ang generateWaysMetadata() ay puwedeng magsalin ng mga field ng string metadata 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' }
  );
}
Paggamit sa Next.js