Démarrage rapide de Next.js

Utilisez cette piste lorsque vous souhaitez le Next adapter et le runtime React ensemble.

Installer

bash
npm install @18ways/next @18ways/react

Traduction de base

tsx
// app/layout.tsx
import type { ReactNode } from 'react';
import { init as initWays } from '@18ways/next/server';
 
const { WaysRoot } = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
});
 
export default async function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <html>
      <body>
        <WaysRoot>{children}</WaysRoot>
      </body>
    </html>
  );
}
 
// app/page.tsx
'use client';
 
import {
  LanguageSwitcher,
  Ways,
  T,
} from '@18ways/react';
import { useLocale } from '@18ways/next/client';
 
export default function Page() {
  const { locale, setLocale } = useLocale();
 
  return (
    <>
      <LanguageSwitcher
        currentLocale={locale}
        onLocaleChange={(nextLocale) =>
          setLocale(nextLocale)
        }
      />
      <Ways context="checkout.button">
        <T>Pay now</T>
      </Ways>
    </>
  );
}

Si vous avez besoin de routage, de middleware ou de métadonnées traduites ensuite, continuez vers Utilisation.

Suivant : utilisation de Next.js