Next.js

Magic Translate 두 Next.js 라우터 모두에서 작동해.App Router를 사용하면 서버에서 페이지가 번역되므로 모든 언어가 자체 번역된 검색 엔진 HTML을 받게 돼.

앱 라우터

페이지를 [locale] 세그먼트 아래에 넣고 제공하려는 언어를 나열해.

// app/[locale]/layout.tsx
const locales = ['en', 'de', 'fr', 'ja'];

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({
  children,
  params
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}

그런 다음 locale 파라미터를 언어로 사용하여 React SSR로 페이지를 번역해.

// app/[locale]/page.tsx
import { createLocalizedT } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

export default async function HomePage({
  params
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { T } = createLocalizedT(translate, locale);

  return (
    <h1>
      <T>Welcome to our website</T>
    </h1>
  );
}

페이지 제목과 설명이 번역 기능으로 번역돼.

인터랙티브 메뉴처럼 번역이 필요한 클라이언트 컴포넌트는 리액트 클라이언트를 사용할 수 있어.MagicTranslateProvider 로 싸서 utsLocaleToLanguage 로 로케일을 변환해.

'use client';

import {
  MagicTranslateProvider,
  utsLocaleToLanguage
} from '@magic-translate/react';

export function Providers({
  locale,
  children
}: {
  locale: string;
  children: React.ReactNode;
}) {
  return (
    <MagicTranslateProvider
      apiKey={process.env.NEXT_PUBLIC_MAGIC_TRANSLATE_API_KEY!}
      language={utsLocaleToLanguage(locale)}
    >
      {children}
    </MagicTranslateProvider>
  );
}

페이지 라우터

먼저 Next.js 국제화 가이드를 따라 로케일을 설정해.

그럼 Next.js 결정된 로케일을 MagicTranslateProvider 에 전달해.Magic Translate 언어 코드는 Next.js 사용하는 로케일과 1:1 로 매핑되지 않아. utsLocaleToLanguage 으로 변환해.

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import {
  MagicTranslateProvider,
  utsLocaleToLanguage
} from '@magic-translate/react';

export default function MyApp({ Component, pageProps }: AppProps) {
  const { locale } = useRouter();

  return (
    <MagicTranslateProvider
      apiKey="<your-api-key>"
      language={utsLocaleToLanguage(locale)}
    >
      <Component {...pageProps} />
    </MagicTranslateProvider>
  );
}

이제 네 웹사이트가 Next.js 결정 로케일에 따라 번역됐어.