nextjs路由定制,路由嵌套,自定义路由,pages配置

众所周知,nextjs使用项目根目录下的pages文件夹作为默认的路由路径,也就是说在pages下配置的文件夹会自动作为对应的路由路径,那么如何配置自己理想的项目结构?

经过查找在配置server.js时,使用next生成应用dir属性设置(server.js不止这点儿代码)。

const next = require("next");
const app = next({
  dir: "./client", // base directory where everything is, could move to src later
  dev
});

如此设置便可以达到下图的项目结构效果,同时打包的内容在client下的.next文件夹里,pages作为路由的页面入口,components文件夹作为主要开发的业务组件,引入到pages目录里,如此便可以将路由和业务区分开来。

ps: 当然如果项目不大,可以直接在根目录新建components目录,不必非要放在client下。

但是如此build编译打包会报错是为什么呢?

因为没有指定文件夹,会默认在根目录编译,那么找不到pages文件夹就会报错,可以在package.json文件下build时增加你的client目录,如图

那为什么费这么大劲配置server.js呢,不能一键启动吗,我不需要太复杂的东西?

既然如此就不需要server.js,直接在scripts各命令后加上client目录名即可,因为next内部封装了小服务器(node_modules/next/dist/server/lib/start-server.js),这个client就相当于dir名字了。

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值