nextjs增加系统路径前缀(basePath)适配方案

在 Next.js 中,路由是通过文件夹结构来定义的,使用类似于 History 模式的 URL 结构。所以如果想通过nginx来代理一个nextjs开发的系统, 除非直接使用跟路径/来进行代理,否则代理将非常麻烦,这时添加basePath就非常有必要了。下面将罗列出nextjs添加前缀后需要做哪些操作来进行适配。

1.next.config.js配置修改

增加basePath配置,这里为了方便统一修改,我使用了环境变量

注意:由于 This value must be set at build time and cannot be changed without re-building as the value is inlined in the client-side bundles.(此值必须在构建时设置,如果不重新构建,则无法更改,因为该值内联在客户端捆绑包中。)所以如果不想使用.env中的环境变量,而是系统内部环境变量,那么在打包之前就应该将环境变量配置好。如果修改了此环境变量 则必须重新打包

2.静态资源路径调整

和vue项目不同,vue中可以通过在vue.config中配置publicPath来设置系统前缀,访问静态资源时将自动加上publicPath对应值作为访问前缀。在nextjs中,添加basePath后,访问public中 的静态资源时需要自己手动添加basePath对应的值作为路径前缀。

2.1 js文件:

2.2 图片:

图片添加前缀的方式和js类似,但是项目中使用静态图片的地方可能比较多,可以直接写一个方法来为图片路径添加前缀

javascript 复制代码
export const getSrcFullPath = (src?: string) => {
  const srcFullPath =
    process.env.NEXT_PUBLIC_SYSTEM_BASE_URL &&
    src?.startsWith('/') &&
    !src.startsWith(process.env.NEXT_PUBLIC_SYSTEM_BASE_URL)
      ? (process.env.NEXT_PUBLIC_SYSTEM_BASE_URL || '') + src
      : src;
  return srcFullPath;
};

2.3 其他静态文件参考js和图片即可。

3.路由路径调整

3.1 如果是通过Link组件的href属性进行路由的跳转,则组件的href属性需要加上配置的前缀

3.2 如果是通过router.push/replace方法进行路由的切换,则传入router.push中的path配置不用修改,即不用添加前缀信息,跳转后的地址默认会包含前缀(通过router.push方法进行路由跳转时一定不要加basePath前缀,加上后会反而会多拼接一次前缀路径导致地址错误)

4.内部接口增加前缀

如果使用了nextjs的Route Handlers来定义自定义接口,那么在访问接口时也需要加上前缀地址,一般情况下,我们会使用二次封装的axios来发送请求,这里也在封装文件中统一添加前缀地址

5.外部接口本地调试调整

除了内部接口,如果还需要访问外部接口,通常需要通过代理设置来解决浏览器请求跨域问题,在nextjs中通过设置next.config.js配置文件中的rewrites属性来实现代理,如图

但是添加basePath,本地调试时再次访问外部接口会直接报错404。

猜想next.config.js中添加basePath后,访问外部接口时接口路径为http://localhost:3000/database/page,此时并没有匹配到添加前缀后的nextjs环境,自然也不会进入到next.config.js中的rewrites代理配置。所以在开发环境,也需要为外部接口添加前缀。添加前缀后方能进入到next.config中的代理(next.config中的rewrites属性无需修改)

相关推荐
Mintopia4 分钟前
🤖 微服务架构下 WebAI 服务的高可用技术设计
前端·javascript·aigc
江城开朗的豌豆18 分钟前
React 跨级组件通信:避开 Context 的那些坑,我还有更好的选择!
前端·javascript·react.js
吃饺子不吃馅1 小时前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多1 小时前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar1 小时前
前端如何实现VAD说话检测?
前端
CodeSheep2 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅2 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip10 小时前
企业级配置式表单组件封装
前端·javascript·vue.js