打开 Next.js 的官方文档：https://nextjs.org/docs/getting-started/installation（国内文档不够新）
Next.js 版本 14.2 ， Node.js 的版本要求必须 >= 18.18。
Next 有两种开发模式，下面讲新的 APP Router。
创建项目
使用 Npx 脚手架工具 create-next-app 来自动安装 Next.js 初始化项目：Getting Started: Installation | Next.js (nextjs.org)
执行安装命令：
npx create-next-app@latest
其中，latest 表示当前脚手架的最新版本。可以在 npm 包管理器网站 查看版本情况。可以手动指定脚手架版本，比如把命令中的 latest 替换为 14.2.7。
工程化配置
脚手架已经帮我们配置了 ESLint 自动校验、TypeScript 类型校验，但一般情况下，我们还需要代码自动格式化插件 Prettier，需要手动整合。
整合多个工具时，很容易出现版本冲突的问题，尤其是 ESlint 和 Prettier 整合时，校验规则可能也会存在冲突。所以最好按照官方文档的指引，比如：https://nextjs.org/docs/app/building-your-application/configuring/eslint#prettier
先去官网安装 prettier（ https://prettier.io/docs/en/install ），执行命令：
npm install --save-dev --save-exact prettier
然后通过命令安装整合包 eslint-config-prettier：
项目中：
然后配置 webstorm 中代码美化插件：
在任意一个文件中执行格式化快捷键（Ctrl + Alt + L），代码按照 prettier 和 eslint 格式化，不报错，表示配置工程化成功。
修改 .eslintrc.json 文件可以改变校验规则，一般自己做项目不需要修改，具体可以到 ESLint 和 Prettier 的官方文档查看。
如果不使用脚手架，就需要自己按照下面这些文档整合这些工具：
- 代码规范：https://eslint.org/docs/latest/use/getting-started
- 代码美化：https://prettier.io/docs/en/install.html
- 直接整合：https://github.com/prettier/eslint-plugin-prettier#recommended-configuration（包括了 https://github.com/prettier/eslint-config-prettier#installation）
引入组件库
1）Ant Design 是 React 项目主流的组件库，Ant Design Procomponents 是在此基础上进一步封装的高级业务组件库，一般的项目使用这两个就足够了。
参考官方文档在 Next.js 项目中引入 Ant Design 5.x 版本的组件库：https://ant-design.antgroup.com/docs/react/use-with-next-cn
执行安装：
npm install antd --save
针对 App Router 模式的 Next.js，需要处理页面闪动的情况：
npm install @ant-design/nextjs-registry --save
修改页面全局布局文件 app/layout.tsx：
import { AntdRegistry } from "@ant-design/nextjs-registry";
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<AntdRegistry>{children}</AntdRegistry>
</body>
</html>
);
}
引入 Ant Design 后，不建议再引入 Tailwind CSS 了，可能会有样式冲突问题。
2）引入 Ant Design 后，我们还可以引入 Ant Design Procomponents，参考 官方文档 执行下列命令即可：
npm i @ant-design/pro-components --save
当前 ProComponents 每一个组件都是一个独立的包，需要在你的项目中安装对应的 npm 包并使用。比如使用 ProTable 表格组件，还需要安装 @ant-design/pro-table。
3）引入组件库后，可以清理掉 app/globals.css 中的样式，减少样式冲突。
修改为如下样式，减少浏览器默认样式的影响：
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
max-width: 100vw;
max-height: 100vh;;
}
扫一扫
3359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
