【Next】2. 项目构建

news2024/9/21 17:53:13

打开 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;;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2098995.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！