Next.js设置basePath后不使用Link组件如何生成对应路径？

解决方案 #

Next.js 提供了两种场景下获取拼接basePath的完整路径的方法，不需要依赖Link组件：

客户端组件（你的场景适用） #

直接使用useRouter钩子暴露的basePath属性，手动拼接路径即可：

// 首先引入useRouter
import { useRouter } from 'next/router'

export default function App(props) {
  const router = useRouter()
  const [showLoginDialog, setShowLoginDialog] = useState(false);
  // 其他原有逻辑...

  const uiConfig = {
    signInFlow: 'popup',
    // 直接拼接得到完整路径，这里传入"/"就会自动变成/Some_Folder/
    signInSuccessUrl: `${router.basePath}/`, 
    signInOptions: [
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
  };
  // 原有渲染逻辑...
}

如果需要封装成你想要的getLink工具函数，可以这么写：

// 放在公共工具文件里即可
const getLink = (path, router) => `${router.basePath}${path}`
// 调用的时候传当前路由实例和目标路径就行
signInSuccessUrl: getLink('/', router)

非组件场景/服务端场景 #

如果是在服务端代码或者非React组件的公共工具里，可以用next/config读取配置：

// 引入配置读取工具
import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()

// 封装通用工具函数
const getLink = (path) => `${publicRuntimeConfig.basePath || ''}${path}`

对应需要你在next.config.js里把basePath暴露到运行时配置里：

module.exports = {
  reactStrictMode: true,
  basePath: '/Some_Folder',
  trailingSlash: true,
  publicRuntimeConfig: {
    basePath: '/Some_Folder',
  },
}

以上写法完全不受页面位置影响，就算你把页面移动到其他目录、或者把登录逻辑封装成公共组件复用，路径都会自动生成正确的结果。

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