로그인

Nextjs+I18n 다국어 국제화 모범 사례(검색 엔진 친화적)

작가:네오양 시간:2024/01/13 읽다: 9847
참고: 이 모범 사례는 다음 페이지 라우팅을 기반으로 합니다. 앱 라우팅에 적합하지 않습니다. 디렉토리의 기본 아이디어는 next-i18ne [...]을 사용하는 것입니다.

참고: 이 모범 사례는 다음 페이지 라우팅을 기반으로 합니다. 앱 라우팅에 적합하지 않습니다.

목차

기본 아이디어

next-i18next를 사용하세요.

"pages" 디렉터리에 [locales] 디렉터리를 추가하고 이 디렉터리에 기본 비즈니스 로직을 배치합니다.

페이지 디렉토리의 인덱스와 같은 페이지는 언어를 결정한 다음 해당 지역화된 페이지 논리를 호출하는 데 사용됩니다.

번역 파일용 공용 디렉토리에 locales 디렉토리를 추가합니다.

설치하다

pnpm 다음-i18next 반응-i18next i18nex 추가

구성

파일 디렉토리

|컴포넌트 ..LangSwitcher.js ..LocLink.js ..MdRenderer.js |lib ..getStatic.js |페이지 ..[로케일] ....index.js .._app.js .._document.js .. index.js |공개 ..locales ....en ...common.json ...index.md ....es ...common.json ..... .index.md |next-i18next. config.js |next.config.js

다음.config.js

const { i18n } = require('./next-i18next.config'); const nextConfig = { i18n }

다음-i18next.config.js

module.exports = { 'development', i18n: { defaultLocale: 'en', // 로케일: [ 'en', 'de', 'es',"cn"], 로케일: [ { 이름: "English", 코드: "en", iso: "en-US", dir: "ltr" }, { 이름: "español",코드: "es", iso: "es-ES", dir: "ltr" }, { 이름: "中文", 코드: "zh_cn", iso: "zh-CN", dir: "ltr" }, { 이름: "Deutsch", 코드: "de", iso: "de-DE", dir: "ltr" }, { 이름: "Italiano", 코드: "it", iso: "it-IT", dir: "ltr" }, { 이름: "日本语", 코드: "ja", iso: " ja-JP", dir: "ltr" }, { name: "한국인",code: "ko", iso: "ko-KR", dir: "ltr" }, { name: "Português",code: " pt", iso: "pt-PT", dir: "ltr" }, ], }, }

로캘 구성은 사용자에게 언어 선택을 표시하는 시나리오를 고려하여 인터넷에 있는 대부분의 구성 방법을 따르지 않았습니다.

lib/getStatic.js

"next-i18next/serverSideTranslations"에서 { serverSideTranslations } 가져오기; "@/next-i18next.config"에서 i18nextConfig 가져오기; const getI18nPaths = () => i18nextConfig.i18n.locales.map((lng) => ({ params : { 로케일: lng.code,//코드 추가 }, })); 내보내기 const getStaticPaths = () => ({ fallback: false, 경로: getI18nPaths(), }); 내보내기 const getI18nProps = async (ctx, ns = ["common"]) => { const locale = ctx?.params?.locale || i18nextConfig.i18n.defaultLocale; let props = { ...(await serverSideTranslations(locale, ns)), }; return props; }; 내보내기 const makeStaticProps = (ns = []) => async (ctx) => ({ props: wait getI18nProps(ctx, ns), });

이는 언어 번역 파일을 가져와서 서버 측에서 번역하는 데 사용되는 논리입니다.

_app.js

"next-i18next"에서 { appWithTranslation } 가져오기; '../comComponents/layout'에서 레이아웃 가져오기 'next'에서 { NextPage } 가져오기; const MyApp = ({ Component, pageProps }) => ; 기본 appWithTranslation(MyApp) 내보내기;

참고: 사용하지 않는 경우 이 라벨은 직접 제거할 수 있습니다.

_document.js

import i18nextConfig from &quot;@/next-i18next.config&quot;; // 기타 코드 import Document, { Html, Head, Main, NextScript, } from &#039;next/document&#039; class MyDocument extends Document { render() { const currentLocale = this. props.__NEXT_DATA__.query.locale || i18nextConfig.i18n.defaultLocale; console.log(currentLocale) 반환 <html lang="{currentLocale}">
      <head>

        <link href="/app.css" />
        <link rel="shortcut icon" href="/icon.png" />
      </head>
      <body>
        <main />
        <nextscript />
      </body>


    </html>; } } 기본 MyDocument 내보내기

index.js

"./[locale]/index"에서 홈 가져오기, { getStaticProps }; 기본 홈 내보내기; 내보내기 { getStaticProps }; 

[로케일] 폴더

www.xxx.com/es와 유사한 국제 라우팅을 구현하는 데 사용됩니다.

공개/로케일 폴더

번역 파일을 저장하는 데 사용됩니다.

구성 요소

언어 선택기: LangSwitcher.js

암호


'use client'
import React from "react";
import { useRouter } from "next/router"
import i18nextConfig from '@/next-i18next.config'
console.log(i18nextConfig.i18n.defaultLocale)
 

const LangSwitcher = ({ lang, ...rest}) => {

        const router = useRouter();

const  GetHref=(locale)=> {

    console.log(locale)

    let href = rest.href || router.asPath
    let pName = router.pathname
    Object.keys(router.query).forEach(k => {
      if (k === 'locale') {
        pName = pName.replace(`[${k}]`, locale)
        return
      }
      pName = pName.replace(`[${k}]`, router.query[k])
    })
    if (locale == i18nextConfig.i18n.defaultLocale) {

      if (pName == '/' + i18nextConfig.i18n.defaultLocale) {
        href = '/'
      } else {
        href = `${href}`

      }

    } else {
      if (locale) {
        href = rest.href ? `/${locale}${rest.href}` : pName
      }
      if (href.indexOf(`/${locale}`) < 0) {
        href = `/${locale}${href}`
      }
    }
    return href
  }

  const LocalChanged = (value) => {
    const thehref = GetHref(value)
    router.push(thehref)
  }

  

  return (

    <div>
      🌐
      <select onChange={(e) => LocalChanged(e.target.value)} defaultValue={lang} className="h-8 m-2 p-1 rounded border-current">

        <option value={lang} > {GetLangData(lang).name}</option>

        {i18nextConfig.i18n.locales.map(locale => {
          if (locale.code === lang) return null
          return (<option value={locale.code} key={locale.code}> {locale.name}</option>)
        })}

      </select>
    </div>
  )
}
 //export 

 export function GetLangData(lang) {
    var res = {}
    {
      i18nextConfig.i18n.locales.map(locale => {
        if (locale.code === lang) {
          console.log(locale)
          res = locale
        }
      })
    }
    return res

  }

export default LangSwitcher

지침:

구성 요소를 소개하고 직접 사용 , lang 매개변수는 현재 언어로 설정됩니다.

import LangSwitcher from './LangSwitcher' const { i18n } = useTranslation('home');

현지화된 링크 구성요소: LocLink.js

&quot;react&quot;에서 React 가져오기; &quot;next/link&quot;에서 링크 가져오기; &quot;next/router&quot;에서 { useRouter } 가져오기; &#039;@/next-i18next.config&#039;에서 i18nextConfig 가져오기 const LinkComponent = ({ children, SkipLocaleHandling, .. .rest }) =&gt; { const router = useRouter(); const locale = Rest.locale || router.query.locale || &quot;&quot;; console.log(router) let href = Rest.href || router.asPath; console.log(href) if (href.indexOf(&quot;http&quot;) === 0) SkipLocaleHandling = true; if (locale &amp;&amp; !skipLocaleHandling) { // href = href console.log(i18nextConfig.i18n.defaultLocale) 콘솔. log(locale) locale==i18nextConfig.i18n.defaultLocale ? href : router.pathname.replace(&quot;[locale]&quot;, locale); } console.log(href) return (
    <>
      <link href="{href}" legacybehavior>
        <a {...rest}>{어린이들}</a>
      </Link>
    </>
  ); }; 기본 LinkComponent 내보내기;

현지화된 Markdown 파일 획득 및 렌더링 구성 요소: MdRenderer.js

import ReactMarkdown from 'react-markdown' import { useState, useEffect } from "react"; import { useRouter } from "next/router" 내보내기 기본 함수 MdRenderer({ path }) { const [a, setA] = useState("" ); const router = useRouter() fetch(path, { next: { 재검증: 0 } }) .then(response => response.text()) .then(data => { setA(data) } ).catch( err=>{console.log(err)}) 반환(
{ㅏ && ( {ㅏ} )}
) }

지침

t 함수

  • "useTranslation"을 소개합니다
  • t를 정의하다
  • {t('xxx')}를 사용하세요. 그게 전부입니다.
import { useTranslation } from "next-i18next"; const { t } = useTranslation(["common"]);//common.json은 번역 파일입니다 {t("xxx")}

현재 언어를 얻는 방법

import { useTranslation } from "next-i18next"; const { i18n } = useTranslation('home'); console.log(i18n.언어)

언어 목록을 반복하는 방법

언어 목록을 가져오고 언어 탐색을 사용자 정의하세요.

import i18nextConfig from '@/next-i18next.config' {i18nextConfig.i18n.locales.map(locale => { if (locale.code === i18nextConfig.i18n.defaultLocale) return( {locale.name} ) const thehref="/"+locale.code 반환 ( {locale.name} ) })} 

내용 단락 번역

백엔드에서 콘텐츠를 얻은 경우에는 이것이 필요하지 않습니다.

하지만 프론트엔드에 컨텐츠가 존재하는 경우에는 json으로 저장하기가 매우 번거롭기 때문에 마크다운으로 저장한 후 컨텐츠를 표시해야 하는 해당 언어 버전의 마크다운 파일을 구하고, 그런 다음 구문 분석하고 표시하십시오.

'../../comComponents/MdRenderer'에서 MdRenderer 가져오기 

요약하다

다중 언어를 사용하면 웹사이트에서 더 많은 트래픽을 얻을 수 있습니다. 이 nextjs 다중 언어 모범 사례는 SEO의 요구 사항을 완전히 고려합니다. 검색 엔진 친화적.

도구 스테이션, 키워드 스테이션, 뉴스 및 콘텐츠 스테이션에 적합합니다.



copyright © www.lyustu.com 판권 소유.
테마: TheMoon V3.0.저자:neo yang