如何在Next.js中为单个页面配置双URL？含目录结构与重定向

一、页面文件夹结构（以主流SSR框架Next.js为例） #

1. Pages Router（Next.js 12及更早版本） #

用动态路由复用页面逻辑，同时保留默认入口：

pages/
├── sports/
│   └── [country].js  # 处理带国家码的体育页面（如/in/sports）
└── sports.js          # 默认入口，负责重定向到美国地区

2. App Router（Next.js 13+） #

适配新的App Router目录规范：

app/
├── sports/
│   ├── [country]/
│   │   └── page.js    # 动态路由页面，接收country参数
│   └── page.js        # 默认入口，重定向到/sports/us
└── layout.js          # 全局布局（可选）

二、重定向配置 #

1. 框架内置重定向（Next.js） #

在项目根目录的next.config.js中配置自动重定向，将无国家码的/sports指向美国地区：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/sports',
        destination: '/sports/us',
        permanent: true, // 永久重定向用301，临时调整用302
      },
    ];
  },
};

module.exports = nextConfig;

2. 服务器层面重定向（如Nginx） #

如果不用前端框架，直接通过服务器配置实现重定向：

# 重定向/sports到/sports/us
location = /sports {
  return 301 /sports/us;
}

# 解析带国家码的路径，传递参数给后端页面
location ~ ^/sports/([a-z]{2})$ {
  try_files $uri $uri/ /sports-page.php?country=$1;
}

三、页面逻辑处理 #

在动态路由页面中，根据country参数渲染对应地区的内容，同时增加兜底逻辑（防止无效国家码）：

// Next.js Pages Router: pages/sports/[country].js
import { useRouter } from 'next/router';

export default function SportsPage() {
  const router = useRouter();
  const { country } = router.query;
  // 兜底到美国地区
  const targetCountry = country?.toLowerCase() || 'us';

  // 模拟获取对应地区的体育数据
  const sportsContent = getRegionalSportsData(targetCountry);

  return (
    <div>
      <h1>{targetCountry.toUpperCase()} 体育专区</h1>
      <div>{sportsContent}</div>
    </div>
  );
}

// 实际项目中替换为接口请求或数据源查询
function getRegionalSportsData(country) {
  const contentMap = {
    us: 'NBA、NFL、MLB等北美主流赛事资讯',
    in: '板球、Kabaddi、印度足球超级联赛等内容',
  };
  return contentMap[country] || contentMap.us;
}

内容的提问来源于stack exchange，提问作者Ajith Arasu