다국어 지원 next.js 웹 응용프로그램

http://myapp.com     <- 기본 언어
http://myapp.com/en  <- 영어
http://myapp.com/ru  <- 러시아어

$ npm install --save react react-dom next next-i18next 

$ npm install --save-dev typescript @types/react @types/react-dom

const config = {
    i18n: {
        defaultLocale: 'ko',
        locales: ['ko', 'en', 'ru'],
        defaultNS: 'common',
        localeDetection: false,
    },
};

module.exports = config;

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

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    /* config options here */
    i18n,
};

module.exports = nextConfig;

├───public
│   └───locales
│       ├───en
│       ├───ko
│       └───ru

{
    "global": {
        "title": "next-i18next 예제"
    },
    "index": {
        "title": "안녕하세요! 👋"
    },
    "about": {
        "title": "소개합니다! 😊 "
    },
    "debug": {
        "title": "디버그"
    },
    "navigator": {
        "link": "Link 컴포넌트 사용",
        "router": "Router 사용"
    }
}

import { useTranslation } from 'next-i18next'

const Compo = () => {
    const { i18n, t } = useTranslation('common');

    return (
        <div>
            <p>{t('global.title')}</p> {/* 한국어인 경우 "next-i18next 예제" 출력 */}
        </div>
    );
};

// import Link from 'next/link';

<Link href={href}>
    <a>
        {label}
    </a>
</Link>

import React from 'react'
import { useRouter } from 'next/router'

const Compo = () => {
    const router = useRouter()
    const handleClick = () => {
        router.push('/somepath');
    }
    return (
        <button onClick={handleClick}>{label}</button>
    );
};

i18n.changeLanguage(languageCode, () => {
    const { pathname, query, asPath } = router;
    // 값 확인용 콘솔 출력
    console.group('i18n.changeLanguage -> callback');
    console.info('language', languageCode);
    console.info(
        'pathname, query, asPath',
        pathname,
        query,
        asPath,
    );
    console.groupEnd();
    router.push({ pathname, query }, asPath, {
        locale: languageCode,
    });
});