【Next】2. 项目构建

秀秀不只会前端
741 阅读2分钟

笔记来源：编程导航

确认环境

打开 Next.js 的官方文档：nextjs.org/docs/gettin…

Next.js 版本 14.2 ， Node.js 的版本要求必须 >= 18.18。

Next 有两种开发模式，下面讲新的 APP Router。

image.png

创建项目

使用 Npx 脚手架工具 create-next-app 来自动安装 Next.js 初始化项目：Getting Started: Installation | Next.js (nextjs.org)

执行安装命令：

npx create-next-app@latest

其中，latest 表示当前脚手架的最新版本。可以在 npm 包管理器网站 查看版本情况。可以手动指定脚手架版本，比如把命令中的 latest 替换为 14.2.7。

image.png

image.png

工程化配置

脚手架已经帮我们配置了 ESLint 自动校验、TypeScript 类型校验，但一般情况下，我们还需要代码自动格式化插件 Prettier，需要手动整合。

整合多个工具时，很容易出现版本冲突的问题，尤其是 ESlint 和 Prettier 整合时，校验规则可能也会存在冲突。所以最好按照官方文档的指引，比如：nextjs.org/docs/app/bu…

先去官网安装 prettier（ prettier.io/docs/en/ins… ），执行命令：

npm install --save-dev --save-exact prettier

然后通过命令安装整合包 eslint-config-prettier：

image.png

项目中：

image.png

然后配置 webstorm 中代码美化插件：

image.png

在任意一个文件中执行格式化快捷键（Ctrl + Alt + L），代码按照 prettier 和 eslint 格式化，不报错，表示配置工程化成功。

修改 .eslintrc.json 文件可以改变校验规则，一般自己做项目不需要修改，具体可以到 ESLint 和 Prettier 的官方文档查看。

如果不使用脚手架，就需要自己按照下面这些文档整合这些工具：

引入组件库

1）Ant Design 是 React 项目主流的组件库，Ant Design Procomponents 是在此基础上进一步封装的高级业务组件库，一般的项目使用这两个就足够了。

参考官方文档在 Next.js 项目中引入 Ant Design 5.x 版本的组件库：ant-design.antgroup.com/docs/react/…

执行安装：

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;;
}
avatar
文章
阅读
粉丝