Uso do Next.js

O adaptador Next é dividido em:

um arquivo local 18ways.config.ts
integração do Next em tempo de build em next.config.js
helpers do servidor de @18ways/next/server
helpers do cliente em @18ways/next/client

Configuração compartilhada

Crie 18ways.config.ts na raiz do seu aplicativo.

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

Então, no seu next.config.js:

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

Roteamento de caminhos do App Router

No App Router, o roteamento de locale é definido pela própria árvore de rotas:

as rotas públicas localizadas ficam em app/[lang]/...
rotas não localizadas permanecem fora de [lang]

Roteamento de caminho do Path Router

Se você quiser roteamento de localidade baseado em caminho, defina router: 'path' e forneça acceptedLocales. withWays() então configura o roteamento nativo de caminhos do i18n do Next para você, com a detecção automática de localidade do Next desativada, para que o 18ways continue no controle da resolução de localidade.

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

Use router: 'none' quando alguma camada de roteamento já existente já controla URLs com reconhecimento de localidade, e você só quer que o 18ways gerencie o estado da localidade.

Layout raiz

Importar de @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

No App Router, use proxy.ts para tratar o redirecionamento da localidade raiz e qualquer canonização de domínio:

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

Se o seu app já tem seu próprio proxy.ts ou middleware.ts, componha getWaysProxyResponse() e retorne-o antes do restante da lógica específica do seu app:

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
}

Mudanças de localidade do lado do cliente

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

Quando a rota atual é localizada, setLocale() preserva a rota e atualiza o segmento locale. Quando a rota atual não é localizada, ela mantém a rota sem localização e atualiza o estado de locale.

Importar de @18ways/next/client:

tsx

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

Link localiza automaticamente os hrefs internos
useRouter() aplica as mesmas regras a push() e replace()
useUnlocalizedPathname() permite comparar o estado da rota sem o prefixo de locale

Use a substituição de locale apenas quando precisar forçar uma escolha:

locale="fr-FR" força um alvo localizado
locale={false} força um destino sem localidade

Metadados traduzidos

generateWaysMetadata() pode traduzir campos de metadados de string para você.

tsx

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