ReactJS 및 i18n을 통한 국제화

24234 단어 i18nwebdevreactjavascript
전 세계에는 많은 언어가 있으며 누구나 우리 페이지의 내용을 이해할 수 있어야 합니다. 국제화의 목표는 응용 프로그램을 국제적으로 현지화하거나 배포하는 데 장벽을 제거하는 것입니다.

해결책



React i18nexthttps://www.i18next.com/ 및 https://github.com/isaachinman/next-i18next을 사용하여 React 애플리케이션에 국제화를 추가하십시오.

레시피



NextJS의 경우


  • NextJS 프로젝트를 초기화하십시오https://nextjs.org/docs/getting-started 설명서 참조

  • i18n 패키지를 설치합니다. 이번에는 "next-i18next"를 사용하는 것이 좋습니다.

    npm 사용



      # npm
  $ npm install next-i18next

    실 사용



      # yarn
  $ yarn add next-i18next


  • 기본 폴더에 "next-i18next.config.js"로 next-i18next 구성 파일을 생성합니다. 다음 구성 파일에 추가된 것과 일치하는 로케일 구성이 포함될 수 있습니다.

    module.exports = {
  i18n: {
    locales: ["en", "es"],
    defaultLocale: "en", // default locale will fallback to 'en'
  },
};


    • 다음에 허용할 경로를 지정해야 합니다. 이번에는 영어와 스페인어만 사용됩니다.

  • 다음 구성 파일 "next.config.js"를 구성합니다. 다음에는 next-i18next 구성 파일에서 이미 구성했기 때문에 로케일 값에 지정된 자체 경로가 있습니다.
    가져오기만 하면 됩니다.

    const { i18n } = require("./next-i18next.config.js");
const nextConfig = {
  reactStrictMode: true,
  i18n,
};

module.exports = nextConfig;

    for changing the language open the link referring to /en or /es



  • 래퍼 구성 요소 "appWithTranslation"을 앱 파일에 추가하면 후크를 통해 구성 요소에서 t(번역) 기능을 사용할 수 있습니다.

    import { appWithTranslation } from "next-i18next";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);


  • 기본적으로 번역 파일 생성next-i18next에서는 번역이 다음과 같이 구성될 것으로 예상합니다.

    .
└── public    
    └── locales
        ├── en
        |   └── common.json
        └── es
            └── common.json

    public > locales > en > common.js 파일을 참조하십시오.

    {
  "title": "i18n NextJS project",
  "spanish": "Spanish",
  "english": "English"
}

    public > locales > es > common.js 파일을 참조하십시오.

    {
  "title": "Proyecto i18n NextJS",
  "spanish": "Español",
  "english": "Ingles"
}


  • 그런 다음 페이지 수준 구성 요소에서 "serverSideTranslation"을 getStaticProps 또는 getServerSideProps(경우에 따라 다름)에 추가합니다. 이 경우 "serverSideTranslation"을 사용합니다.

    import { serverSideTranslations } from "next-i18next/serverSideTranslations";

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])), //['common', 'other'] if more files are needed
      // Will be passed to the page component as props
    },
  };
}

    This code need to be added in every file using the translations.



  • 원하는 구성 요소에서 next-i18next 패키지를 먼저 가져와 번역 사용을 시작합니다.

    import { useTranslation } from "next-i18next";

    그런 다음 텍스트가 번역될 각 구성 요소 내부에 const를 만듭니다.

    const { t } = useTranslation("common");

    그리고 이것이 번역이 사용되는 방식입니다

    {t("title")}

    샘플 홈 파일을 참조하십시오.

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

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useTranslation } from "next-i18next";

const Home = () => {
  const { t } = useTranslation("common");
  return (
    <div className={styles.container}>
      <Head>
        <title>i18n NextJS project</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t("title")}</h1>

        <div className={styles.grid}>
          <a href="/en" className={styles.card}>
            <p>{t("english")}</p>
          </a>

          <a href="/es" className={styles.card}>
            <p>{t("spanish")}</p>
          </a>
        </div>
      </main>
    </div>
  );
};

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
      // Will be passed to the page component as props
    },
  };
}

export default Home;


    • 부담없이 확인하십시오 codesanbox.io project

    React.js의 경우


  • 반응 프로젝트 생성

  • i18n 필수 패키지 설치

    npm 사용



      # npm
  $ npm install i18next --save
  $ npm install react-i18next i18next --save
  npm install i18next-browser-languagedetector

    실 사용



      # yarn
  $ yarn add i18next
  $ yarn add react-i18next
  $ yarn add i18next-browser-languagedetector


  • 번역 파일을 생성합니다. 여기에는 언어와 구성이 포함되어 있습니다. "i18n"이라는 폴더와 "i18n.js"라는 JS 파일 내부에 생성하는 것이 좋습니다.

    import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    resources: {
      en: {
        translation: {
          title: "i18n React project",
          english: "English",
          spanish: "Spanish",
        },
      },
      es: {
        translation: {
          title: "Proyecto i18n en React",
          english: "Ingles",
          spanish: "Español",
        },
      },
    },
  });

export default i18n;


  • i18n.js 파일을 index.js 파일로 가져오기

    import "./i18n/i18n";


  • 원하는 구성 요소에서 react-i18next 패키지를 먼저 가져와 번역 사용을 시작합니다.

    import { useTranslation } from 'react-i18next'

    그런 다음 텍스트가 번역될 각 구성 요소 내부에 const를 만듭니다.

     const { t } = useTranslation()

    그리고 이것이 번역이 사용되는 방식입니다

      {t(title)}


  • 마지막으로 app.js 구성 요소에서 changelanguage 기능을 구성합니다.

    먼저 useTranslation에서 thi18n 요소를 가져옵니다.

    const { t, i18n } = useTranslation(); // we used the t before

    이제 changelanguage 함수를 사용하여 bt 언어를 변경할 수 있습니다.

    <button onClick={() => i18n.changeLanguage("en")} className="App-link">
  {t("english")}
</button>
<button onClick={() => i18n.changeLanguage("es")} className="App-link">
  {t("spanish")}
</button>


    • 부담없이 확인하십시오 codesanbox.io project
    파이썬에서 혼동 행렬의 각 요소에 대한 인덱스 가져 오기
    이진 검색

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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