Next.js クイックスタート

次のアダプターとReactランタイムを一緒に使用したいときは、このトラックを使用してください。

インストール

bash
npm インストール @18ways/next @18ways/react

基本的な翻訳

tsx
// app/layout.tsx
インポート タイプ { ReactNode } から 'react';
インポート { 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>
    </>
  );
}

ルーティング、ミドルウェア、または翻訳されたメタデータが次に必要な場合は、使用法に進んでください。

次: Next.jsの使用