Next.js 국제화(i18n) 튜토리얼

20102 단어 nextjstutorialreacti18n
Next.js은 Vercel(이전의 ZEIT)에서 만든 오픈 소스 프레임워크입니다. 이는 React 위에 구축되었으며 React 구성 요소의 server-side rendering(SSR)에 대한 즉시 사용 가능한 솔루션을 제공합니다. 또한 static site generation (SSG)를 지원하여 초고속 사용자 친화적인 웹 사이트를 즉시 구축할 수 있습니다. 상대적으로 젊은 프레임워크이지만 기존 i18n 라이브러리를 잘 보완하는 좋은foundation for internationalization 기능이 있습니다. 다음 장에서는 Next.js 앱에서 국제화를 설정하는 방법을 설명합니다.

새 Next.js 프로젝트 만들기



먼저 create-next-app CLI 도구를 사용하여 새 Next.js 프로젝트를 생성해 보겠습니다.

npx create-next-app nextjs-i18n-example


React Intl 의존성 추가



앞에서 언급했듯이 Next.js는 기존 i18n 라이브러리( react-intl , lingui , next-intl 및 이와 유사한 라이브러리)와 잘 작동합니다. 이 자습서에서는 react-intl 를 사용합니다.

cd nextjs-i18n-example
npm i react-intl


국제화된 라우팅을 위한 구성 추가



번역과 라우팅은 국제화의 두 가지 주요 기둥입니다. 이전에 추가된react-intl 라이브러리가 번역 및 서식 지정을 처리합니다. 라우팅과 관련하여 Next.js에는 built-in support이 있습니다. 이 기본 제공 지원은 하위 경로 라우팅과 도메인 라우팅이라는 두 가지 옵션을 제공합니다. 이 튜토리얼에서는 덜 복잡하고 일반 웹 사이트에 더 일반적이므로 하위 경로 라우팅을 사용합니다. 이를 위해 next.config.js 구성으로 i18n 파일을 업데이트해 보겠습니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    // The locales you want to support in your app
    locales: ["en", "fr"],
    // The default locale you want to be used when visiting a non-locale prefixed path e.g. `/hello`
    defaultLocale: "en",
  },
};

module.exports = nextConfig;


참고: 국제화된 라우팅은 Next.js 10부터 사용할 수 있습니다.

현지화 파일 만들기



다음으로 중요한 것은 현지화 파일을 추가하는 것입니다. 이를 위해 lang 디렉토리를 생성해 보겠습니다. 그 안에 en.json 및 fr.json 두 개의 JSON 파일을 추가합니다. 이 파일은 각각 영어와 프랑스어에 대한 번역을 보관할 것입니다. 아래에서 언급된 파일을 추가한 후 프로젝트 구조를 볼 수 있습니다.

nextjs-i18n-example
|-- lang
|   |-- en.json
|   |-- fr.json
|-- pages
|   |-- api
|   |-- _app.js
|   |-- index.js
|   |-- ...
|-- public
|-- ...
|-- package.json
|-- package-lock.json


그런 다음 나중에 사용할 메시지로 현지화 파일을 채웁니다.
en.json 파일:

{
  "page.home.head.title": "Next.js i18n example",
  "page.home.head.meta.description": "Next.js i18n example - English",
  "page.home.title": "Welcome to <b>Next.js i18n tutorial</b>",
  "page.home.description": "You are currently viewing the homepage in English 🚀"
}

fr.json 파일:

{
  "page.home.head.title": "Next.js i18n exemple",
  "page.home.head.meta.description": "Next.js i18n exemple - Français",
  "page.home.title": "Bienvenue à <b>Next.js i18n didacticiel</b>",
  "page.home.description": "Vous consultez actuellement la page d'accueil en Français 🚀"
}


Next.js 프로젝트에서 react-intl 구성



국제화된 라우팅 및 현지화 파일은 작업의 첫 번째 부분에 불과합니다. 두 번째 부분은 react-intl 라이브러리를 설정하는 것입니다. 아래에서 _app.js 파일에서 변경된 사항을 확인할 수 있습니다.

import { useRouter } from "next/router";
import { IntlProvider } from "react-intl";

import en from "../lang/en.json";
import fr from "../lang/fr.json";

import "../styles/globals.css";

const messages = {
  en,
  fr,
};

function MyApp({ Component, pageProps }) {
  const { locale } = useRouter();

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <Component {...pageProps} />
    </IntlProvider>
  );
}

export default MyApp;


i18n에 맞게 페이지 조정



우리는 대부분의 작업을 수행했습니다. 마지막 단계는 이 모든 것을 통합하는 것입니다. 따라서 페이지 디렉토리 아래의 index.js 파일을 업데이트할 예정입니다. 아래에서 현지화 메시지에 액세스하기 위한 명령형 및 선언형의 두 가지 접근 방식을 찾을 수 있습니다. 우리는 이미 these two ways of usage , formatting options 을 다루었으며 another post 에서도 유사합니다.
index.js 파일:

import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { FormattedMessage, useIntl } from "react-intl";

import styles from "../styles/Home.module.css";

export default function Home(props) {
  const { locales } = useRouter();

  const intl = useIntl();

  const title = intl.formatMessage({ id: "page.home.head.title" });
  const description = intl.formatMessage({ id: "page.home.head.meta.description" });

  return (
    <div className={styles.container}>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <link rel="icon" href="/favicon.ico" />

        {/* Add hreflang links */}
        <link rel="alternate" href="http://example.com" hrefLang="x-default" />
        <link rel="alternate" href="http://example.com" hrefLang="en" />
        <link rel="alternate" href="http://example.com/fr" hrefLang="fr" />
      </Head>

      <header>
        <div className={styles.languages}>
          {[...locales].sort().map((locale) => (
            <Link key={locale} href="/" locale={locale}>
              {locale}
            </Link>
          ))}
        </div>
      </header>

      <main className={styles.main}>
        <h1 className={styles.title}>
          <FormattedMessage id="page.home.title" values={{ b: (chunks) => <b>{chunks}</b> }} />
        </h1>

        <p className={styles.description}>
          <FormattedMessage id="page.home.description" />
        </p>
      </main>
    </div>
  );
}


축하합니다! 🎉
Next.js 프로젝트에서 국제화를 성공적으로 설정했습니다.

자세한 내용과 예는 original post 에서 찾을 수 있습니다.

이 문서에 사용된 모든 코드 샘플은 GitHub repo에서 사용할 수 있습니다.
Terraform 상태 악몽
Flutter – Google Cloud 함수 호출

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage