NextJS 13 Pages目录下如何根据主题环境配置单页面多路径？

针对你提到的不同主题对应不同访问路径、动态路由适配的场景，以下是具体实现方案：

1. 配置路由重写（next.config.js） #

通过环境变量判断当前主题，将对应路径映射到实际页面文件，确保主题切换后新路径能指向正确页面。

module.exports = async () => {
  const currentTheme = process.env.THEME || 'default';
  const rewrites = [];

  if (currentTheme === 'tr') {
    // 静态路由映射：/iletisim -> /contact
    rewrites.push({
      source: '/iletisim',
      destination: '/contact',
    });
    // 动态路由映射：/iletisim/xxx -> /contact/xxx
    rewrites.push({
      source: '/iletisim/:path*',
      destination: '/contact/:path*',
    });
  }

  return { rewrites };
};

2. 页面路径校验（防止旧路径访问） #

在目标页面组件中添加校验逻辑，只有当前主题对应的路径才能正常访问，其他路径直接返回404，实现"旧路径失效"的需求。

静态页面（pages/contact.js） #

import { useRouter } from 'next/router';

export default function ContactPage() {
  const router = useRouter();
  const expectedPath = process.env.THEME === 'tr' ? '/iletisim' : '/contact';

  // 校验当前路径是否符合主题要求
  if (router.asPath !== expectedPath) {
    return <div>404 - 页面不存在</div>;
  }

  // 页面核心逻辑
  return <div>联系我们页面</div>;
}

动态路由页面（pages/contact/[...contact-detail-item].js） #

import { useRouter } from 'next/router';

export default function ContactDetailPage() {
  const router = useRouter();
  const basePath = process.env.THEME === 'tr' ? '/iletisim' : '/contact';

  // 校验路径前缀是否匹配当前主题
  if (!router.asPath.startsWith(`${basePath}/`)) {
    return <div>404 - 页面不存在</div>;
  }

  // 获取动态路由参数
  const contactDetailItems = router.query['contact-detail-item'];

  // 页面核心逻辑
  return <div>联系详情：{contactDetailItems?.join('/')}</div>;
}

3. 封装主题化链接组件 #

避免硬编码路径，封装自定义Link组件，自动根据当前环境变量生成对应主题的路径：

import Link from 'next/link';

export default function ThemeLink({ href, children, ...props }) {
  let resolvedHref = href;
  const theme = process.env.THEME;

  // 替换静态路径
  if (href === '/contact') {
    resolvedHref = theme === 'tr' ? '/iletisim' : '/contact';
  }
  // 替换动态路径前缀
  else if (href.startsWith('/contact/')) {
    resolvedHref = theme === 'tr' ? href.replace('/contact/', '/iletisim/') : href;
  }

  return <Link href={resolvedHref} {...props}>{children}</Link>;
}

使用时直接替换Next.js自带的Link组件即可：

<ThemeLink href="/contact">联系我们</ThemeLink>
<ThemeLink href="/contact/detail/123">查看详情</ThemeLink>

注意事项 #

• 环境变量需在项目启动时注入（如THEME=tr npm run dev），修改后需重启项目生效。
• 若需要SEO友好的路由，上述重写方案已满足需求，Next.js会将重写后的路径作为实际路由输出。

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