Next.js 14如何为路由创建多语言别名？

要让website.com/about与website.com/sobre指向同一页面，这里提供两种实用方案：

方案一：创建别名路由并复用组件 #

这种方式无需额外配置，直接复用原页面组件，逻辑清晰：

1. 在src目录下新增sobre路由文件夹，结构如下：

/src
- page.tsx
- layout.tsx
- /about
  - page.tsx
- /sobre
  - page.tsx

2. 在/sobre/page.tsx中导入并导出about页面的所有内容：

// src/sobre/page.tsx
// 复用主页面组件
export { default } from '../about/page';

// 如果页面有自定义元数据或其他导出函数，一并导出
export { generateMetadata } from '../about/page';

访问/sobre时会直接渲染about页面的内容，和/about完全一致，且各自路由都能被Next.js正常处理。

方案二：用Middleware批量管理路由别名 #

如果需要维护大量多语言路由别名，使用中间件更高效：

1. 在src目录下创建middleware.ts文件：

// src/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

// 定义路由别名映射，可按需扩展
const routeAliases = new Map([
  ['/sobre', '/about'],
  // 示例：后续添加更多别名
  // ['/contatos', '/contacts'],
]);

export function middleware(request: NextRequest) {
  const currentPath = request.nextUrl.pathname;

  // 匹配到别名时，重写路由渲染目标页面，地址栏保持原路径
  if (routeAliases.has(currentPath)) {
    const targetPath = routeAliases.get(currentPath);
    return NextResponse.rewrite(new URL(targetPath!, request.url));
  }

  return NextResponse.next();
}

// 指定中间件生效的路径范围
export const config = {
  matcher: ['/sobre/:path*', '/about/:path*'],
};

通过rewrite操作，用户访问/sobre时后台渲染/about的内容，但地址栏仍显示/sobre，适合批量管理场景。

优化SEO建议 #

为了让搜索引擎识别两个路径为同一内容的不同语言版本，可在about/page.tsx中添加元数据配置：

export function generateMetadata() {
  return {
    alternates: {
      canonical: '/about',
      languages: {
        'en-US': '/about',
        'pt-PT': '/sobre',
      },
    },
  };
}

内容的提问来源于stack exchange，提问作者Emanuel Saramago