Next.js quickstart

Use this track when you want the Next adapter and the React runtime together.

Install

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

Basic translation

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

If you need routing, middleware, or translated metadata next, continue to Usage.

Next: Next.js usage