겨우 10분 만에 넥스트.일본어를 응용한 대화

안녕하세요.네.
하루에 몇 번 투고한다고 용서해 주세요.
이번에 나는 초속으로 내가 운용한 사이트 설명i18n에 대응할 수 있기 때문에 그 방법을 썼다.
Next.js10 이전에 next-i18next 같은 포장을 사용하지 않고 재미있는 일을 조금만 하지 않으면 i18n+Next에 대응하기 어렵다.제이스의 은혜를 완전히 받아들일 수는 없지만Next.js10 정부에서 i18n을 지원했습니다.
방법은 매우 간단하다,next.config.js를 지원하고 싶은 언어 환경과 기본값만 지정합니다.

module.exports = {
  i18n: {
    locales: ["en", "ja"],
    defaultLocale: "en",
  },
};

이상.이렇게, 예를 들면 lognog.com의 경우
기본값은 영어 lognog입니다.com
일본어로 lognog.com/ja
구문을 사용합니다.그리고 모든 어족이 정태적으로 생성되는 것도 나쁘지 않아요.
사용자의 로켈을 판단하는 방법은 확인Accept-Language하고 URL을 해당 로켈로 자동으로 변경합니다.
유일한 병목은 ↑의 자동 루트는 응용 프로그램 경로에서만 가능하다는 것이다.즉 example.com만 검출하고 example.com/app 같은 경우는 검출되지 않는다는 것이다.그러나 앞으로 수요가 있다면 nested routes의 자동 검출 대응도시야에 들어오다.
번역을 추가하려면 먼저 useRouter부터 언어 환경을 발췌한다.

import { useRouter } from 'next/router'

const App = () => {
   const { locale } = useRouter() // 現在のロケールを表示してくれる
   // ..
}

여기서부터 번역고를 이용할 수 있지만 자신의 사정이 간단해 en.js와ja.js 같은 파일을 만들어 번역을 대상으로 넣었다.

// ja.js

export default {
  SUBTITLE: "「満足」を可視化しよう",
  TO_DASHBOARD: "ダッシュボードへ",
  // ...
}

// en.js
export default {
  SUBTITLE: "Visualize your customer happiness.",
  TO_DASHBOARD: "Go to dashboard",
  // ...
}

그리고 이 파일들을 가져와 언어 환경에 따라 적절한 번역을 유도한다.

import { useRouter } from 'next/router'
import en from "../../locales/en";
import ja from "../../locales/ja";

const App = () => {
   const { locale } = useRouter()
   
   const t = locale === "en" ? en : ja;
   
   return (
      <div>
         ...
	 <h1>{t.SUBTITLE}</h1>
	 <button>{t.TO_DASHBOARD}</button>
      </div>
   )
}

용서해 주지만 매번 공유기 모듈과 번역 파일을 가져오는 것은 번거롭기 때문에 hook으로 하자

// hooks/useLocale.ts

import en from "../../locales/en";
import ja from "../../locales/ja";
import { useRouter } from "next/router";

export const useLocale = () => {
  const { locale } = useRouter();

  const t = locale === "en" ? en : ja;

  return { locale, t };
};

이것만으로 두 언어의 대응을 완성했다.
이상!