라우팅을 사용한 Next.js의 국제화(i) 가이드-JS 튜토리얼-php.cn

라우팅을 사용한 Next.js의 국제화(i) 가이드

WBOY

풀어 주다： 2024-07-17 16:13:27

원래의

799명이 탐색했습니다.

Guide to Internationalisation (i) in Next.js with Routing

국제화(i18n)는 엔지니어링 변경 없이 다양한 언어 및 지역에 쉽게 적응할 수 있도록 애플리케이션을 설계하는 프로세스입니다. 이 기사에서는 Next.js 애플리케이션에서 i18n을 설정하고 next-intl을 사용하여 영어와 스페인어 사이를 전환하는 언어 전환기를 만드는 방법을 배웁니다.

설치

먼저 Next.js의 국제화 관리를 용이하게 하는 next-intl 라이브러리를 설치해야 합니다. 터미널에서 다음 명령을 실행하세요:

npm install next-intl

로그인 후 복사

프로젝트 구조

프로젝트 구성은 다음과 같습니다.

├── messages
│   ├── en.json
│   └── es.json
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── page.tsx

로그인 후 복사

1. 번역 메시지 설정

프로젝트 루트에 메시지 디렉터리를 만듭니다. 이 디렉터리 안에 지원하려는 각 언어에 대한 JSON 파일을 추가하세요.

메시지/en.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

로그인 후 복사

메시지/es.json

{
  "greeting": "Hola Codú",
  "farewell": "Adiós Codú"
}

로그인 후 복사

이 파일에는 애플리케이션에서 사용할 문구의 번역이 포함되어 있습니다.

2. Next.js 구성

next.config.mjs에서 국제화를 지원하도록 Next.js를 구성하세요.

다음.config.mjs

import { getRequestConfig } from 'next-intl/server';

// List of supported languages
const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) {
    return { notFound: true };
  }

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

로그인 후 복사

이 파일은 요청된 언어에 따라 올바른 번역 메시지를 로드하도록 Next.js를 구성합니다.

3. 국제화 미들웨어

리디렉션을 처리하고 기본 언어를 설정하는 미들웨어를 만듭니다.

src/middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // List of all supported languages
  locales: ['en', 'es'],

  // Default language
  defaultLocale: 'en'
});

export const config = {
  // Only match internationalised pathnames
  matcher: ['/', '/(en|es)/:path*']
};

로그인 후 복사

이 미들웨어는 아무것도 지정되지 않은 경우 기본 언어로의 리디렉션을 처리합니다.

4. 국제화 구성

국제화 설정을 관리하기 위한 구성 파일을 만듭니다.

src/i18n.ts

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

로그인 후 복사

이 파일은 로캘의 유효성을 검사하고 해당 메시지를 로드합니다.

5. 레이아웃 및 페이지 설정

국제화를 지원하도록 레이아웃과 메인 페이지를 구성하세요.

src/app/[로케일]/layout.tsx

import { useLocale } from 'next-intl';
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const locale = useLocale();
  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}

로그인 후 복사

src/app/[로케일]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    <div>
      <h1>{t('greeting')}</h1>
      <p>{t('farewell')}</p>
    </div>
  );
}

로그인 후 복사

이 파일은 번역을 사용할 수 있도록 레이아웃과 메인 페이지를 구성합니다.

6. 언어 전환기 만들기

마지막으로 영어와 스페인어 간을 전환하는 언어 전환기를 만듭니다.

src/app/[로케일]/switcher.tsx

'use client';

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    <label className='border-2 rounded'>
      <p className='sr-only'>Change language</p>
      <select
        defaultValue={localActive}
        className='bg-transparent py-2'
        onChange={onSelectChange}
        disabled={isPending}
      >
        <option value='en'>English</option>
        <option value='es'>Spanish</option>
      </select>
    </label>
  );
}

로그인 후 복사

이 구성요소를 사용하면 사용자가 인터페이스 언어를 변경할 수 있습니다.