/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'gc'],
    defaultLocale: 'en',
  }
}

import type { NextPage } from 'next'
import { useRouter } from 'next/router'

const Home: NextPage = () => {
  const { locale } = useRouter()
 	
  return (<p>Your locale is {locale}</p>)
}

export const useI18n = (locale: string) => ({
  translate: (term: string) => {
    return Boolean(dictionary[locale][term])
      ? dictionary[locale][term]
      : term
  },
})

import { dictionary } from './dictionary'

type Locale = keyof typeof dictionary
type Term = keyof typeof dictionary[Locale]

export const useI18n = (locale: Locale) => ({
  translate: (term: Term) => dictionary[locale][term]
})

export const dictionary = {
  en: { hw: "Hello World" },
  de: { hw: "Hallo Welt" }
}

export default function Home() {
  const locale = useRouter().locale as Locale
  const { translate: t } = useI18n(locale)
  
  return (
    <>
      <nav>
        {locale === 'en' ? (
          <Link href="/" locale="de">
            <a>Deutsch</a>
          </Link>
        ) : (
          <Link href="/" locale="en">
            <a>English</a>
          </Link>
        )}
      </nav>
      <h1>{t('hw')}</h1>
    </>
  )
 }

❯ yarn add next-g11n

❯ npm i next-g11n