next.config.js 파일에 i18n 설정 추가하기

next.config.js

module.exports = {
	i18n: {
    locales: ["en", "ko"], // 지원하는 언어 리스트
    defaultLocale: "ko", // 디폴트 값
		localeDetection: true, // 언어자동감지 - 기본값: true
  },
}

언어 자동 감지 (localeDetection)

유저가 루트경로로 접근했을 시 넥스트에서는 헤더의 Accept Language 값을 통해 사용자의 locale 을 유추한다. 다만 브라우저마다 표시되는 방법이 다르다.

1. 크롬

2. 파이어폭스

3. 엣지

4. 사파리

<aside> 💡 크롬, 웨일, 파이어폭스: ko, ko-KR 엣지: ko 사파리: ko-kr

</aside>

next-i18next 사용 방법

1) next-i18next 설치

<aside> 💡 > npm i next-i18next // yarn add next-i18next

</aside>

2) next.config.js

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

module.exports = {
    i18n,
}

3) next-i18next.config.js (최상위폴더에 새로 생성)

module.exports = {
    i18n: {
        locales: ["en", "ko"],
        defaultLocale: "ko",
        localeDetection: true, // 언어자동감지 - 기본값: true
    },
};