【Next】2. 项目构建

打开 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.mzph.cn/pingmian/52944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

速盾:防御ddos攻击的几大有效方法是什么?

DDoS攻击&#xff08;分布式拒绝服务攻击&#xff09;是一种恶意攻击手段&#xff0c;旨在通过向目标服务器发送大量的请求&#xff0c;使其无法正常响应正常用户的请求。这种攻击会耗尽服务器的带宽和资源&#xff0c;导致服务不可用。为了保护网络安全&#xff0c;防御DDoS攻…

机械学习—零基础学习日志(概率论总笔记3)

“条件概率”和“本身概率” 对于几乎所有的随机事件来讲&#xff0c;条件概率由于条件的存在&#xff0c;它通常不等于本身的概率。前提条件会影响后续的概率&#xff0c;在一个前提条件下&#xff0c;某个时间发生的概率&#xff0c;我理解&#xff0c;这叫&#xff0c;条件…

【R语言】基于Biomod2集成平台探究物种分布区的构建流程(SDMs)(持续更新中。。。。。。)

Species Distribution Models 1.写在前面2.物种分布模型介绍3.输入数据准备及预处理3.1.如何从GBIF网站上获取分布点数据&#xff08;基于rgbif包&#xff09;3.2.分布点稀疏处理&#xff08;基于spThin函数&#xff09;3.3.如何获取环境变量数据&#xff08;基于getData函数&a…

Android 常用三种日志框架[Logger、Timber、XLog]

一、日志框架背景 如果我们需要用三方库&#xff0c;那就意味着基于原生方案会存在一些痛点&#xff0c;我们不得不使用某种手段去解决这些痛点。那原生 Logcat 存在哪些痛点&#xff0c;我们来聊一聊&#xff1a; 日志不能持久化&#xff0c;缓冲区日志很容易丢失如果系统压…

高等代数精解【10】

文章目录 线性方程组概述增广矩阵基础一、增广矩阵的作用二、增广矩阵的实际应用例题 高斯消元法基础julia代码实现高斯消元法算法方阵高斯消元法非方阵的情况 Julia 中将整型矩阵转换为浮点型矩阵。方法 1&#xff1a;使用类型转换函数方法 2&#xff1a;使用 convert 函数方法…

C语言字符串拼接

在 C 语言中&#xff0c;可以使用标准库函数 strcat 或 strncat 来拼接字符串。这些函数位于 string.h 头文件中&#xff0c;负责将一个字符串追加到另一个字符串的末尾。 1. 使用 strcat 进行字符串拼接 strcat 函数用于将源字符串&#xff08;source&#xff09;追加到目标…

Linux CentOS 添加路由

一、临时添加 查看当前路由表 ip route show添加路由 假设你要添加一条到特定网络的路由&#xff0c;可以使用以下命令&#xff1a; sudo ip route add <destination_network>/<netmask> via <gateway> dev <interface>例如&#xff0c;要添加一条…

【Python123题库】#统计文章字符数 #查询高校信息 #查询高校名

禁止转载&#xff0c;原文&#xff1a;https://blog.csdn.net/qq_45801887/article/details/140081854 参考教程&#xff1a;B站视频讲解——https://space.bilibili.com/3546616042621301 有帮助麻烦点个赞 ~ ~ Python123题库 统计文章字符数查询高校信息查询高校名 统计文章…

Qt/QML学习-Tumbler

QML学习 Tumbler例程视频讲解代码 main.qml import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Tumbler {id: tumbleranchors.centerIn: parent// 只显示3个视图…

第二十章 rust多平台编译

注意 本系列文章已升级、转移至我的自建站点中,本章原文为:rust多平台编译 目录 注意一、前言二、跨平台代码编写三、跨平台编译四、静态编译一、前言 相比于C/C++,rust最方便的一个东西除了包管理之外,便是跨平台编译了。 rust提供了一系列的工具可以帮助我们非常容易的…

创建一个Spring MVC项目(配置,导入依赖,以及前端控制器)

Tomcat&#xff08;10.1.28&#xff09;配置 详细讲解&#xff01; 链接https://blog.csdn.net/or77iu_N/article/details/141266535?spm1001.2014.3001.5502 1、创建 Java Web 项目 File -> New -> Project 2、导入 Spring MVC 相关依赖 <dependency> <gro…

汽车乘客热舒适度大挑战,如何利用仿真技术提高汽车环境舒适度

舒适性在人们选择汽车的决定性方面占比越来越重&#xff0c;而汽车乘员舱环境的舒适性是指为乘员提供舒适愉快便利的乘坐环境与条件&#xff0c;包括良好的平顺性、车内的低噪声、适宜的空气环境以及良好的驾驶操作性能。 舒适性 经济性 安全性、动力性 典型的乘员舱热舒适性模…

测试 UDP 端口可达性的方法

前言&#xff1a; UDP (User Datagram Protocol) 是一种无连接的传输层协议&#xff0c;它不像 TCP 那样提供确认机制来保证数据包的可靠传输。因此&#xff0c;测试 UDP 端口的可达性通常需要一些特殊的方法&#xff0c;因为传统的端口扫描工具&#xff08;如 nmap&#xff0…

AGI系列(9)手把手带你玩转 Coze 画板节点

本文以智能体“日签卡片生成器”的制作来阐述 Coze 画板节点的使用方法。 效果演示 核心流程 日签卡片生成器工作流整体分为两部分&#xff1a; 工作流&#xff1a;其核心流程为通过用户输入的主题词生成卡片的标题、内容 图像流&#xff1a;通过LLM输出的内容在图像流完成卡…

Verilog开源项目——百兆以太网交换机(七)包修改模块设计

Verilog开源项目——百兆以太网交换机&#xff08;七&#xff09;包修改模块设计 &#x1f508;声明&#xff1a;未经作者允许&#xff0c;禁止转载 &#x1f603;博主主页&#xff1a;王_嘻嘻的CSDN主页 &#x1f511;全新原创以太网交换机项目&#xff0c;Blog内容将聚焦整体…

Java项目: 基于SpringBoot+mysql网上订餐系统分前后台(含源码+数据库+开题报告+PPT+毕业论文)

一、项目简介 本项目是一套基于SpringBootmysql网上订餐系统分前后台 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单…

【北森-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

(二)Kafka离线安装 - Zookeeper下载及安装

一、下载 下载ZooKeeper之前&#xff0c;需要根据下载的Kafka版本&#xff0c;来确定ZooKeeper的版本。 Kafka官方地址&#xff1a;Apache Kafka 1、先下载源码版本&#xff0c;下载完后解压&#xff0c;在kafka-3.8.0-src\gradle目录下找到dependencies.gradle文件&#xff…

Spring高手之路

成为一名Spring框架的高手是一个涉及广泛知识面和深入实践的过程。Spring框架是Java EE领域的一个开源的、轻量级的、控制反转(IoC)的、面向切面(AOP)的容器框架&#xff0c;它提供了展示层和业务层的框架功能。以下是一些关键步骤和资源&#xff0c;可以帮助你走上成为Spring高…

我用GPT对RAG技术的学习和探索

思维导图 下图是我的学习和探索过程&#xff0c;红点表示已研究&#xff0c;黄点表示待研究 目录 思维导图RAG技术概述RAG 的关键优点应用场景 如何了解RAG技术的原理和应用1. **基础理论学习**2. **实战演练**3. **学习资源利用**4. **保持学习的连贯性**5. **多角度理解**6. …