网站设计流行趋势,成都公司注册多少钱,中国建设银行网站查余额,怎样做模板网站在 Next.js 中#xff0c;路由是通过文件夹结构来定义的#xff0c;使用类似于 History 模式的 URL 结构。所以如果想通过nginx来代理一个nextjs开发的系统#xff0c; 除非直接使用跟路径/来进行代理#xff0c;否则代理将非常麻烦#xff0c;这时添加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类似但是项目中使用静态图片的地方可能比较多可以直接写一个方法来为图片路径添加前缀
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属性无需修改
