Next.js 설정

어댑터 설치

npm install tyndale-next

설정

Next.js config 업데이트

import { withTyndaleConfig } from 'tyndale-next/config';

export default withTyndaleConfig({
  // your existing Next.js config
});

middleware 추가

import { createTyndaleMiddleware } from 'tyndale-next/middleware';

export default createTyndaleMiddleware();

export const config = {
  matcher: ['/((?!api|_next|_tyndale|.*\\..*).*)'],
};

이렇게 하면 locale 감지, locale 접두사가 붙은 라우트로의 리디렉션, 그리고 활성 locale을 쿠키에 유지하는 처리를 수행합니다.

레이아웃에 서버 provider 추가

import { getDirection, TyndaleServerProvider } from 'tyndale-next/server';

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

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

TyndaleServerProvider는 서버에서 locale 데이터를 로드합니다. 서버 컴포넌트에서는 getDirection(locale)로, 클라이언트 컴포넌트에서는 useDirection()으로 <html dir>를 직접 설정하세요.

동작 방식

withTyndaleConfig는 tyndale.config.json을 읽고, 런타임에 Tyndale이 사용하는 빌드 타임 env var를 주입하며, 앱이 단일 provider context를 공유하도록 tyndale-react에 alias를 설정합니다
middleware는 요청을 locale 접두사가 붙은 라우트로 리디렉션하고, locale alias를 정규화하며, 후속 렌더링을 위해 locale cookie/header를 설정합니다
TyndaleServerProvider는 서버 사이드에서 번역을 로드하고 React context를 통해 모든 컴포넌트에서 사용할 수 있게 합니다