如何在Next.js中用next-i18next配置无前缀默认语言

要实现默认语言（如英文）无路径前缀、其他语言（如中文）保留前缀的效果，需要调整Next.js的国际化路由配置和next-i18next的设置，具体步骤如下：

1. 配置Next.js的国际化路由（next.config.js） #

在项目根目录的next.config.js中，添加或修改i18n配置，指定默认语言、支持的语言列表，可按需关闭自动语言检测：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    defaultLocale: 'en', // 设置默认语言为英文
    locales: ['en', 'zh'], // 项目支持的语言列表
    localeDetection: false, // 关闭浏览器语言自动检测，避免自动跳转
  },
}

module.exports = nextConfig

2. 修改next-i18next配置文件（next-i18next.config.js） #

调整配置使其与Next.js路由设置匹配，关键开启nonExplicitSupportedLngs以支持默认语言的无前缀路径：

module.exports = {
  i18n: {
    defaultLng: 'en',
    supportedLngs: ['en', 'zh'],
    nonExplicitSupportedLngs: true, // 允许默认语言使用无前缀路径访问
  },
  localePath: './public/locales', // 语言文件存放路径，根据项目实际情况调整
}

3. 页面组件的语言适配 #

在页面组件中使用useTranslation钩子获取翻译函数，同时在数据获取方法中传递当前语言信息：

普通页面示例（pages/test.js） #

import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export default function TestPage() {
  const { t } = useTranslation('common') // 'common'对应语言文件名，按需修改
  return <h1>{t('test_title')}</h1>
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  }
}

动态路由页面示例（pages/test2/[id].js） #

动态路由需在getStaticPaths中生成默认语言无前缀、其他语言带前缀的路径：

import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export default function Test2Page({ id }) {
  const { t } = useTranslation('common')
  return <div>{t('test2_content', { id })}</div>
}

export async function getStaticPaths({ locales }) {
  const paths = []
  // 为默认语言生成无前缀路径
  paths.push({ params: { id: '1' }, locale: 'en' })
  // 为其他语言生成带前缀路径
  locales.forEach(locale => {
    if (locale !== 'en') {
      paths.push({ params: { id: '1' }, locale })
    }
  })
  return { paths, fallback: false }
}

export async function getStaticProps({ locale, params }) {
  return {
    props: {
      id: params.id,
      ...(await serverSideTranslations(locale, ['common'])),
    },
  }
}

4. 处理根路径重定向 #

移除原根路径跳转到/en的逻辑，若使用Next.js中间件（middleware.js），可添加如下逻辑确保根路径直接加载默认语言内容：

import { NextResponse } from 'next/server'

export function middleware(request) {
  const { pathname } = request.nextUrl
  // 根路径无语言前缀时，强制使用默认语言
  if (pathname === '/' && !request.nextUrl.locale) {
    return NextResponse.rewrite(new URL('/', request.url), {
      locale: 'en',
    })
  }
  return NextResponse.next()
}

5. 验证效果 #

配置完成后，访问以下路径应符合预期：

• 默认语言路径：/test、/test2/1（加载英文内容）
• 其他语言路径：/zh/test、/zh/test2/1（加载中文内容）
• 根路径/直接显示默认语言首页，不会跳转到/en

内容的提问来源于stack exchange，提问作者fiorentina.gf