能否使用Next.js Link组件从slug页面导航至默认页面？

可以使用Next.js的Link组件指向默认页面，但不能直接写固定的/doc/default——因为生产环境下子域名页面里的相对路径会解析为[slug].default.com/doc/default，而非预期的主域名路径。以下是无需推送至测试/生产环境就能确保正确性的实现方式：

方法1：通过环境变量动态配置URL #

1. 在项目根目录创建.env.local（本地开发用）和.env.production（生产环境用）文件：
   • 本地.env.local内容：

     NEXT_PUBLIC_DEFAULT_PAGE_URL=/doc/default
     

   • 生产.env.production内容：

     NEXT_PUBLIC_DEFAULT_PAGE_URL=https://default.com/doc
     

2. 在slug页面组件中直接读取环境变量生成链接：

   import Link from 'next/link';
   
   export default function SlugPage() {
     return (
       <Link href={process.env.NEXT_PUBLIC_DEFAULT_PAGE_URL}>
         回到默认页面
       </Link>
     );
   }
   

方法2：通过环境判断生成URL #

如果不想用环境变量，也可以直接通过NODE_ENV区分环境：

import Link from 'next/link';

const getDefaultPageHref = () => {
  return process.env.NODE_ENV === 'development' 
    ? '/doc/default' 
    : 'https://default.com/doc';
};

export default function SlugPage() {
  return (
    <Link href={getDefaultPageHref()}>
      回到默认页面
    </Link>
  );
}

为什么之前basePath无效？ #

你的生产环境中slug页面部署在子域名下，nextRouter获取的basePath会继承当前子域名的路径上下文，所以返回的是[slug].default.com/doc，无法直接用来指向主域名的默认页面。

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