序

本文持续记录Next.js开发过程中的一些经验。

路由系统

nextjs有两套路由系统，Pages Router 和v12后的 App Router, 注意看官方文档的时候有个选项切换，才能确保文档信息符合当前项目所需

截屏2024-04-03 11.11.15.png

Next.js部署

默认构建产物生成在.next文件夹中，如果要导出为静态页面，需要指定为静态导出。注意：老版本中的export命令（v13.3.0next export）已弃用并改成output配置（"output": "export"），具体见以下小节。

静态导出部署

Next.js 支持从静态网站或单页应用（SPA）开始，然后在后期可以选择升级使用需要服务器的功能。

当运行 next build 时，Next.js 会为每个路由生成一个 HTML 文件。通过将严格的 SPA 分解为单独的 HTML 文件，Next.js 可以避免在客户端加载不必要的 JavaScript 代码，从而减小了包的大小并加快了页面加载速度。

由于 Next.js 支持这种静态导出，因此它可以部署和托管在任何可以提供 HTML/CSS/JS 静态资源的 web 服务器上。

官方文档： nextjs.org/docs/pages/…

配置：

// next.config.js
const nextConfig = {
    output: 'export', // 允许生成out目录下的静态文件
}

执行npm run build,会导出构建结果到out文件夹中截屏2024-03-13 14.08.28.png

Next.js环境变量配置

记录在该文档中：juejin.cn/post/734545…

Next.js引入antDesign的问题

增加如下配置：

// next.config.js
const nextConfig = {
    transpilePackages: [
        // antd & deps
        // "@rc-component",
        "@ant-design",
        "antd",
        "rc-cascader",
        "rc-checkbox",
        "rc-collapse",
        "rc-dialog",
        "rc-drawer",
        "rc-dropdown",
        "rc-field-form",
        "rc-image",
        "rc-input",
        "rc-input-number",
        "rc-mentions",
        "rc-menu",
        "rc-motion",
        "rc-notification",
        "rc-pagination",
        "rc-picker",
        "rc-progress",
        "rc-rate",
        "rc-resize-observer",
        "rc-segmented",
        "rc-select",
        "rc-slider",
        "rc-steps",
        "rc-switch",
        "rc-table",
        "rc-tabs",
        "rc-textarea",
        "rc-tooltip",
        "rc-tree",
        "rc-tree-select",
        "rc-upload",
        "rc-util",
    ], // 不然引入antd组件会报错！
}

其他问题汇总：

CSS-in-JS 与 tailwindcss 优先级冲突？

Next.js 开发问题汇总指南（持续补充）

序