如何在 Next.js 中實作國際化

module.exports = {
  i18n: {
    // 這些是您應用程式中要支援的所有語言環境
    locales: ['en-US', 'fr', 'nl-NL'],
    // 這是當使用者造訪非語言環境前綴路徑（例如 `/hello`）時使用的預設語言環境
    defaultLocale: 'en-US',
    // 這是語言環境網域清單及其應處理的預設語言環境
    // （僅在設定網域路由時需要）
    // 注意：子網域必須包含在網域值中才能匹配，例如 "fr.example.com"
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en-US',
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl-NL',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
        // 可選的 http 欄位可用於在本機測試語言環境網域時使用 http 而非 https
        http: true,
      },
    ],
  },
}

module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL'],
    defaultLocale: 'en-US',
  },
}

module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL', 'nl-BE'],
    defaultLocale: 'en-US',

    domains: [
      {
        // 注意：子網域必須包含在網域值中才能匹配
        // 例如若預期主機名為 www.example.com 則應使用該值
        domain: 'example.com',
        defaultLocale: 'en-US',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl-NL',
        // 指定應重新導向至此網域的其他語言環境
        locales: ['nl-BE'],
      },
    ],
  },
}

module.exports = {
  i18n: {
    locales: ['default', 'en', 'de', 'fr'],
    defaultLocale: 'default',
    localeDetection: false,
  },
  trailingSlash: true,
}

import { NextRequest, NextResponse } from 'next/server'

const PUBLIC_FILE = /\.(.*)$/

export async function middleware(req: NextRequest) {
  if (
    req.nextUrl.pathname.startsWith('/_next') ||
    req.nextUrl.pathname.includes('/api/') ||
    PUBLIC_FILE.test(req.nextUrl.pathname)
  ) {
    return
  }

  if (req.nextUrl.locale === 'default') {
    const locale = req.cookies.get('NEXT_LOCALE')?.value || 'en'

    return NextResponse.redirect(
      new URL(`/${locale}${req.nextUrl.pathname}${req.nextUrl.search}`, req.url)
    )
  }
}

module.exports = {
  i18n: {
    localeDetection: false,
  },
}

import Link from 'next/link'

export default function IndexPage(props) {
  return (
    <Link href="/another" locale="fr">
      前往 /fr/another
    </Link>
  )
}

import { useRouter } from 'next/router'

export default function IndexPage(props) {
  const router = useRouter()

  return (
    <div
      onClick={() => {
        router.push('/another', '/another', { locale: 'fr' })
      }}
    >
      前往 /fr/another
    </div>
  )
}

import { useRouter } from 'next/router'
const router = useRouter()
const { pathname, asPath, query } = router
// 僅變更語言環境並保留所有其他路由資訊，包括 href 的查詢
router.push({ pathname, query }, asPath, { locale: nextLocale })

import Link from 'next/link'

export default function IndexPage(props) {
  return (
    <Link href="/fr/another" locale={false}>
      前往 /fr/another
    </Link>
  )
}

export const getStaticPaths = ({ locales }) => {
  return {
    paths: [
      // 若未提供 `locale`，則僅生成 defaultLocale
      { params: { slug: 'post-1' }, locale: 'en-US' },
      { params: { slug: 'post-1' }, locale: 'fr' },
    ],
    fallback: true,
  }
}

export async function getStaticProps({ locale }) {
  // 呼叫外部 API 端點取得文章
  // 您可以使用任何資料獲取函式庫
  const res = await fetch(`https://.../posts?locale=${locale}`)
  const posts = await res.json()

  if (posts.length === 0) {
    return {
      notFound: true,
    }
  }

  // 透過返回 { props: posts }，Blog 元件
  // 將在建置時接收 `posts` 作為 prop
  return {
    props: {
      posts,
    },
  }
}