한 걸음 한 걸음: 어떻게 Next Translate로 당신의 Next JS 응용을 국제화합니까

번역을 다음 페이지에 추가하는 방법을 알아보다.다음 번역 js 프로그램을 사용합니다.자수성가하여 첫 통역까지.
Next.js는 많은 회사들이 사용하는 유명한 React 프레임워크이다.그것은 기존의 많은 기능을 가져왔고 광속으로 최적화된 사이트를 구축할 수 있게 했다.
그들의 최근 버전에서 그들은 "Internationalized Routing"라는 새로운 기능을 실현했다.힌트를 주기 위해서, 그 안에 내장된 지원은 당신의 사이트 노선을 국제화시킨다.
이것은 이 프레임워크와 추가NextJS i18n 라이브러리를 사용하면 임의의 여러 국가와 당신의 사이트를 공유할 수 있다는 것을 의미합니다!
이 단계별 가이드에서는 다음을 설명합니다.

다음 것을 어떻게 초기화합니까?"next translate"가 있는 js 프로그램 (우리가 사용할 i18n 라이브러리)

번역을 만들고 현지화 사이트를 시작하는 방법

주요 번역 기능을 어떻게 사용하는가(번역 연결 사용)

당신은 잠수할 준비가 되었습니까?🚀

우리는 왜 다음 번역을 선택합니까?
더 많은 토론을 하기 전에, 당신은 왜 우리가 NextJS의 많은 번역 라이브러리에서 사용해야 하는지 알고 싶을 수도 있습니다. next-translate library
대부분의 i18n 라이브러리 솔루션, 예를 들어'react-i18next','next-i18next','next zero intl'등이 같은 기능을 공유하더라도'next translate'는 사용하기 쉽고 넥스트 JS를 통해 설정할 수 있다.
라이브러리 관리자가 가방의 경량급을 유지하려고 시도하는 프레임워크입니다.

"🚀 ・ Works well with automatic page optimization.
🦄 ・ Easy to use and configure.
🌍 ・ Basic i18n support: interpolation, plurals, useTranslation hook, Trans component…
🈂️ ・ It loads only the necessary translations (for page and for locale).
📦 ・ Tiny (~1kb) and tree shakable. No dependencies." - From the "next-translate" NPM package homepage

1. 새 NextJS 응용 프로그램 만들기

Note: You can skip to the next step if you already have an existing application.

준비가 되면 터미널을 열고 프로젝트 폴더로 이동할 수 있습니다.첫 번째로 해야 할 일은 새 NextJS 프로그램을 초기화하는 것입니다.
문서에 따라 다음 명령을 입력해야 합니다.

$ npx create-next-app@latest

Next JS가 설치되어 있지 않으면 다운로드하라는 메시지가 표시됩니다.너는 마땅히 이 단계를 받아들여야 한다.
이 도구는 몇 분 후에 준비되어 있으며, 항목의 이름을 지정해 주십시오.사용자가 선택한 이름을 선택할 수 있지만 이 설명서의 목적에 따라 다음 번역 응용 프로그램을 사용합니다.
현재 cd your-project-name command cd next-translate-app 를 사용하여 새로 만든 폴더'next translate app '에서 이동할 수 있습니다.
폴더 트리는 다음과 같습니다.

.
├── README.md
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.js
│ ├── api
│ │ └── hello.js
│ └── index.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
└── styles
├── Home.module.css
└── globals.css
4 directories, 11 files

Note: I will share the folder tree with you whenever we create new folders and files in this tutorial. It will help you to see what you've done.
If you want the same output in your terminal, you can use the tree -I node_modules command.

2. 다음 Translate에 다음 Translate를 설치합니다.js 프로젝트
이 자습서의 다음 단계는 사용할 NextJS i18n 라이브러리를 설치하는 것입니다.
터미널로 돌아가서 다음 명령을 입력하여 NPM 패키지를 설치합니다.

$ npm install next-translate

3. 다음 JS 프로필에서 다음 번역 설정
줄줄이js 프로젝트는 다음 단계가 있습니다.배치하다.루트 저장소의 js 파일입니다.프로젝트의 번역을 초기화하기 위해 수정이 필요합니다.
파일을 처음 열 때는 다음과 같은 항목이 있어야 합니다.

module.exports = {
  reactStrictMode: true,
};

"next translate"를 가져와서 다음과 같은 모듈로 내보내야 합니다.

const nextTranslate = require('next-translate');

module.exports = nextTranslate({
  reactStrictMode: true,
});

Note: As you mention, the old configuration object is passed as a parameter of our nextTranslate variable. If you want to pass more settings, you can do it inside this object.

4. 다음 번역을 위한 i18n 구성 만들기
official documentation의 요구에 따라 루트 저장소에 i18n.js 파일을 만들어서 라이브러리를 설정해야 합니다.
이 단계별 지침은 깊이 파고들지 않고 주요 기능을 고수할 것이다.마지막으로 더 알고 싶으시면 문서를 보시는 것을 강력히 권장합니다.
루트 저장소에 i18n.js 파일을 만들고 삽입하려면 다음과 같이 하십시오.

module.exports = {
  locales: ['en', 'fr'], // Array with the languages that you want to use
  defaultLocale: 'en', // Default language of your website
  pages: {
    '*': ['common'], // Namespaces that you want to import per page (we stick to one namespace for all the application in this tutorial)
  },
};

지금, 너의 나무는 아래와 같아야 한다.

.
├── README.md
├── i18n.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.js
│ ├── api
│ │ └── hello.js
│ └── index.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
└── styles
├── Home.module.css
└── globals.css
4 directories, 12 files

Note: If you want to understand better how translations are loaded, you can discover it in the Next-Translate documentation.

5. NextJS 번역 파일 만들기
너는 거의 사이트에 너의 번역 텍스트를 표시할 준비가 되어 있지만, 코드를 깊이 연구하기 전에 마지막 단계가 있다.
다음 작업을 위해 번역 파일을 만들어야 합니다.js 응용 프로그램.이를 위해서는 루트 저장소에'translations' 폴더를 만들어야 합니다.그 안에 i18n.js 파일 (locales 변수) 에 정의된 모든 언어 환경에는 폴더가 있습니다.
우리의 예에서 다음 폴더를 만들어야 합니다: locales/en/ 과 locales/fr/.
그리고 이 폴더에서 i18n.js 파일에서 만든 이름 공간과 일치하는 파일을 만들어야 합니다.예를 들어 "공공"이름 공간만 있기 때문에 모든 저장소에 common.json 파일을 만들어야 합니다.
다음은 이 나무 뒤의 모습이다.

.
├── README.md
├── i18n.js
├── locales
│ ├── en
│ │ └── common.json
│ └── fr
│   └── common.json
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.js
│ ├── api
│ │ └── hello.js
│ └── index.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
└── styles
├── Home.module.css
└── globals.css
7 directories, 14 files

Note: As an initial value, you can set an empty object in your translations files ({}).

6. 첫 번째 국제화 텍스트 표시
코드를 실행하고 NextJS 기본 페이지를 봅시다!다음을 입력할 수 있습니다.

$ npm run dev

이 단계별 설명서는 번역에 대한 기본 페이지index.js의 CSS 스타일을 유지합니다.우선, 아래의 코드로 index.js 내용을 교체해 주십시오.

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js Localization with Next-Translate</title>
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>Welcome to my i18n NextJS application!</h1>
        <p className={styles.description}>
          I'm using the Next-Translate library to translate this page.
        </p>
      </main>
    </div>
  );
}

저장하면 이 페이지가 있어야 합니다.

완벽해!우리의 목표는 동적 텍스트로 이러한 정적 텍스트를 대체하는 것이다."다음 번역"라이브러리 덕분에 사이트에서 선택한 언어와 사용자가 정의한 번역에 따라 업데이트됩니다.
이를 위해'next translate'에서 제공하는 useTranslation 갈고리를 사용할 수 있습니다.이 갈고리는 불러올 이름 공간을 매개 변수로 합니다.우리의 예에서 그것은'흔한'(참고문헌: i18n.js과 locales/ 폴더)이다.
갈고리에서 t 함수를 추출할 수 있으며, 이 함수는 변환 키 string 를 매개 변수로 한다.이 키는 번역 이름에 대응합니다.
이 강좌의 목적에서 키 번역이 부족할 때 어떤 일이 일어나는지 확인하기 위해 이 번역들을 정의합니다.

import useTranslation from 'next-translate/useTranslation';
import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  const { t } = useTranslation('common');
  return (
    <div className={styles.container}>
      <Head>
        <title>{t('metaTitle')}</title>
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>{t('title')}</h1>
        <p className={styles.description}>{t('description')}</p>
      </main>
    </div>
  );
}

저장하면 다음이 표시됩니다.

보시다시피common는 저희 명칭 공간의 명칭(참고문헌:locales/[locale]/common.js입니다. ":"이후에 번역 키를 알 수 있습니다.
라이브러리에서 제공하는 이름 공간과 키의 번역을 찾을 수 없을 때 이 상황을 볼 수 있습니다.
이제 키마다 번역을 추가합니다.우선, 우리가 가지고 있는 키를 열거해야 합니다.

메타 제목

직함

설명

모든 언어의 common.js 파일을 열고 키의 번역을 시작할 수 있습니다.예를 들면 다음과 같습니다.

locales/en/common.json

{
 "metaTitle": "Next.js Localization with Next-Translate",
 "title": "Welcome to my i18n NextJS application!",
 "description": "I'm using the Next-Translate library to translate this page."
}

locales/fr/common.json

{
 "metaTitle": "Localisation de Next.js avec Next-Translate",
 "title": "Bienvenue dans mon application NextJS i18n !",
 "description": "J'utilise la bibliothèque Next-Translate pour traduire cette page."
}

일단 파일이 저장되면, 새로 고칠 수 있으며, 잃어버린 번역 파일이 영문 텍스트로 바뀌는 것을 볼 수 있을 것이다.축하합니다!😎

7. 어떻게 한 언어에서 다른 언어로 바꿉니까?
너는 아마도 "너무 좋다. 나는 영어판을 보았는데......그런데, 내가 어떻게 프랑스어판을 볼 수 있겠니?"라고 생각할 것이다.걱정하지 마라, 이것은 매우 간단하다!
로케일 매개변수와 함께 the Next Link component를 사용할 수 있습니다.
그것을 눌렀을 때, 선택한 언어 환경이 있는 페이지로 바뀔 것입니다.

import useTranslation from 'next-translate/useTranslation';
import Head from 'next/head';
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  const { t } = useTranslation('common');
  return (
    <div className={styles.container}>
      <Head>
        <title>{t('metaTitle')}</title>
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>{t('title')}</h1>
        <p className={styles.description}>{t('description')}</p>
        <Link href="/" locale="en">
          <h2>Anglais</h2>
        </Link>
        <Link href="/" locale="fr">
          <h2>Français</h2>
        </Link>
      </main>
    </div>
  );
}

타담..🥁 너는 방금 너의 첫 번째 국제화 사이트를 완성했다!
당신의 사이트는 아래와 같아야 합니다!만약 없다면, 걱정하지 마라!다음 JS 현지화 예는 이 단계별 안내서의 끝에 있습니다.


보상: FlyCode 덕분에 번역 속도를 5배 높이는 방법🚀
개발자로서, 당신은 사이트의 텍스트를 수정해야 할 수도 있고, 심지어는 같은 번역을 여러 번 수정해야 할 수도 있다.
이 작업들은 시간이 많이 걸리고, 때로는 결과가 제품 팀의 기대에 완전히 부합되지 않을 때도 있다.
이제 당신의 공헌자를 위해 디자인된 소프트웨어가 개발자처럼 당신의 응용 프로그램과 상호작용을 할 수 있도록 함으로써 모든 업무 절차를 간소화할 수 있다고 상상해 보세요.이것은 당신이 건축 특색에 더욱 집중할 수 있도록 시간을 낼 것이다.
이것이 바로 FlyCode가 탄생한 이유입니다!
그러나 우리가 말한 바와 같이 빠른 시연은 지루한 소개보다 낫다!
확신하십니까?😉 Flycode website 외에도 다음과 같은 기사를 읽고 팀과 공유할 수 있습니다.

How Product Managers can work like software engineers? 👩‍💻

How to edit your product like a 🤘

코드는 GitHub에서 찾을 수 있습니다.
전체 코드를 검색하고 실행하려면 FlyCode GitHub 에서 모든 내용을 제공합니다.
GitHub => Next JS i18n Example with Next-Translate
나는 네가 이 순서에 따라 점진적인 지침을 좋아하길 바란다.새로운 내용을 사용할 수 있을 때 다음 순서에 따라 알림을 받으세요!