Next.js中next-intl嵌套路由失效问题求助

我正在使用 next-intl 实现国际化功能，已完成官方 App Router 相关配置。首页可正常运行，但尝试访问 /register 路由时，系统会忽略 locale 参数，直接返回 not-found.jsx。当前使用 <Link href={"/register"}> 进行页面导航。

文件夹结构 #

src
|-- app
|   |-- [locale]
|       |-- (public)
|           |-- layout.jsx
|           |-- page.jsx
|           |-- not-found.jsx
|           |-- register
|               |-- page.jsx
|-- middleware.js
|-- i18n.js

middleware.js #

import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  locales: ["en", "ka", "ru"],
  defaultLocale: "en",
});

export const config = {
  matcher: ["/", "/(en|ka|ru)/:path*"],
};

i18n.js #

import { notFound } from "next/navigation";
import { getRequestConfig } from "next-intl/server";

const locales = ["en", "ka", "ru"];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default,
  };
});

解决方案 #

问题核心在于直接使用不带 locale 的路径导航，不符合 next-intl 的路由结构要求。以下是两种修正方案：

1. 使用 next-intl 提供的 Link 组件 #

next-intl 的 Link 会自动拼接当前 locale 参数，无需手动处理：

import Link from 'next-intl/link';

// 直接写目标路径即可，组件自动补充 locale
<Link href="/register">注册</Link>

2. 手动拼接带 locale 的路径 #

若继续使用 Next.js 原生 Link，需获取当前 locale 并拼接完整路径：

import Link from 'next/link';
import { useLocale } from 'next-intl';

export default function Home() {
  const locale = useLocale();
  return (
    <Link href={`/${locale}/register`}>注册</Link>
  );
}

补充说明 #

当前 middleware 的匹配规则是正确的，但直接访问 /register 时，middleware 会尝试重定向到带默认 locale 的路径（如 /en/register），但如果导航时未生成正确路径，就会触发根目录下的 not-found。使用上述正确导航方式后，会自动生成符合路由结构的带 locale 路径，解决 404 问题。

内容的提问来源于stack exchange，提问作者David Henry