Next.js 快速入门

当您想要将 Next 适配器和 React 运行时一起使用时，请使用此轨道。

安装

bash
npm install @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 使用