Next 13 App Router默认本地化无前缀访问问题求助

针对你遇到的App Router页面无法通过无前缀路径访问默认Locale（en）内容的问题，可通过以下步骤解决：

1. 修正next-translate配置文件 #

在项目根目录的i18n.js中，开启默认Locale无前缀配置，并关联对应页面的翻译命名空间：

module.exports = {
  locales: ["en", "fr"],
  defaultLocale: "en",
  prefixDefaultLocale: false, // 核心配置：默认Locale不添加路径前缀
  pages: {
    "*": ["common"],
    "/test-router/[slug]": ["blog"], // 绑定App Router页面的翻译文件
  },
};

2. 添加Next.js中间件处理路由映射 #

创建项目根目录的middleware.js，借助next-translate内置中间件拦截请求，将无前缀路由自动映射到默认Locale：

import { middleware as nextTranslateMiddleware } from "next-translate/middleware";

export default nextTranslateMiddleware({
  locales: ["en", "fr"],
  defaultLocale: "en",
});

export const config = {
  matcher: [
    // 排除无需处理的内部路径与静态资源
    "/((?!api|_next/static|_next/image|favicon.ico).*)",
  ],
};

3. 调整App Router页面的参数生成逻辑 #

在App Router页面（如app/test-router/[slug]/page.js）中，确保静态参数生成包含默认Locale，并正确调用翻译钩子：

import useTranslation from "next-translate/useTranslation";

export async function generateStaticParams() {
  return [
    { locale: "en", slug: "slugish-url" },
    { locale: "fr", slug: "slugish-url" },
  ];
}

export default function Page({ params }) {
  const { t } = useTranslation("blog", params.locale);
  return <div>{t("title")}</div>;
}

4. 同步next.config.js配置 #

确保next.config.js中的i18n配置与next-translate保持一致：

const nextTranslate = require("next-translate-plugin");

module.exports = nextTranslate({
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
  },
});

完成以上配置后，重启开发服务器（npm run dev），访问/test-router/slugish-url即可加载en本地化内容，/fr/test-router/slugish-url加载fr内容，与Pages Router的行为保持一致。

内容的提问来源于stack exchange，提问作者Matheus Baldas