在Next.js中使用next-intl实现无前缀默认语言路由

next-intl是一个优秀的Next.js国际化解决方案，它提供了完整的i18n支持。在实际项目中，我们经常需要实现这样的路由结构：默认语言使用无前缀路径，而其他语言则保留语言前缀。本文将详细介绍如何通过next-intl的中间件配置实现这一需求。

项目背景与需求

在Next.js 14应用中使用app router时，开发者通常会将所有页面放在[locale]目录下以实现国际化。默认情况下，next-intl会为所有语言添加前缀路径，例如/en/home和/ko/home。但很多项目希望默认语言(如韩语ko)能够使用无前缀的简洁路径，如/home，而其他语言(如英语en)则保留前缀/en/home。

解决方案

关键配置：localePrefix参数

next-intl的中间件提供了localePrefix参数，可以设置为'as-needed'来实现这一需求。这个选项的作用是：

• 对默认语言(ko)移除语言前缀
• 对其他语言(en)保留语言前缀

完整中间件配置

import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  locales: ["en", "ko"],
  defaultLocale: "ko",
  localePrefix: "as-needed",
});

export const config = {
  matcher: [
    "/((?!api|_next|_vercel|.*\\..*).*)",
    "/(en|ko)/:path*",
  ],
};

配置解析

1. locales：定义支持的语言列表
2. defaultLocale：设置默认语言为韩语(ko)
3. localePrefix: 'as-needed'：关键配置，实现默认语言无前缀
4. matcher：路由匹配规则
   • 第一部分排除API路由、Next.js内部路由和静态文件
   • 第二部分匹配带语言前缀的路由

实现原理

当localePrefix设置为'as-needed'时，中间件会进行如下处理：

1. 对于默认语言(ko)的请求：
   • 如果URL有前缀/ko/home，会重定向到无前缀的/home
   • 直接访问/home会正常处理
2. 对于其他语言(en)的请求：
   • 必须包含语言前缀/en/home
   • 访问无前缀的/home会自动重定向到默认语言

注意事项

1. 确保matcher配置正确，特别是排除规则部分
2. 默认语言的无前缀路由和带前缀路由在SEO上被视为相同内容，需要注意规范URL
3. 在客户端组件中使用路由时，next-intl会自动处理语言前缀逻辑

总结

通过合理配置next-intl中间件的localePrefix参数，我们可以实现默认语言无前缀、其他语言保留前缀的国际化路由方案。这种配置既保持了URL的简洁性，又确保了多语言支持的功能完整性，是国际化项目中值得推荐的实践方式。