【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,一经查实,立即删除!

相关文章

【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…

创建一个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…

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

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

RASA使用长文记录以及一些bug整理

RASA 学习笔记整理 一 安装 在虚拟环境中安装&#xff0c;进入python3版本的环境 conda activate python3 ai04机器旧版本&#xff1a;rasa-nlu和rasa-core是分开安装的 最新版本&#xff1a;rasa 将二者做了合并 直接安装 pip3 install rasa 在安装到如下步骤时候会报…

应急响应-爆破漏洞应急响应流程(以SSH爆破为例)

目录 概述研判分析登录成功登录失败历史命令authorized_keys 定损止损攻击链路还原清理恢复总结复盘参考 概述 爆破漏洞是比较常见漏洞&#xff0c;端口开放&#xff0c;管理后台没有做登录频率限制等情况都可能遭受到爆破攻击&#xff0c;本文以SSH爆破为例&#xff0c;介绍下…

N10 - NLP中的注意力机制

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目录 1. 注意力机制是什么2. 注意力实现步骤0. 准备隐藏状态1. 获取每个编码器隐藏状态的分数2. 通过softmax层运行所有分数3. 通过softmax得分将每个编码器的…

以低代码技术加速推动企业数字创新

在数字化转型的浪潮中&#xff0c;企业面临着前所未有的挑战和机遇。随着技术的不断进步&#xff0c;企业需要快速适应市场变化&#xff0c;创新产品和服务&#xff0c;以保持竞争力。低代码技术作为一种新兴的开发模式&#xff0c;正逐渐成为企业数字创新的重要推动力。 低代码…

《深入浅出WPF》读书笔记.8路由事件

《深入浅出WPF》读书笔记.8路由事件 背景 路由事件是直接响应事件的变种。直接响应事件&#xff0c;事件触发者和事件响应者必须显示订阅。而路由事件的触发者和事件响应者之间的没有显示订阅&#xff0c;事件触发后&#xff0c;事件响应者安装事件监听器&#xff0c;当事件传…

财富趋势金融大模型已通过备案

财富趋势金融大模型已通过备案 8月28日晚&#xff0c;国内领先的证券软件与信息服务提供商——财富趋势&#xff0c;公布了其2024年上半年财务报告&#xff1a; 今年上半年&#xff0c;财富趋势营收1.48亿元&#xff0c;同比增长0.14%&#xff1b;实现归母净利润为1亿元&#x…

国标GB28181视频监控EasyCVR视频汇聚平台国标注册被陌生IP入侵如何处理?

GB28181国标/GA/T1400协议/安防综合管理系统EasyCVR视频汇聚平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。智慧安防/视频存储/视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级…

nginx容器映射配置文件后,启动一直报错提示:failed (13: Permission denied)的排查

问题现象&#xff1a; 使用harbor 的install.sh 创建docker-compose之后&#xff0c;出现nginx容器一直重启。 查看日志发现是&#xff1a;配置文件无权限。报错信息如下&#xff1a; Sep 2 16:43:13 172.28.0.1 nginx[1344]: 2024/09/02 08:43:13 [emerg] 1#0: open() “/e…

HarmonyOS开发实战( Beta5版)线程间通信场景最佳实践

简介 在应用开发中&#xff0c;经常会需要处理一些耗时的任务&#xff0c;如果全部放在主线程中执行就会导致阻塞&#xff0c;从而引起卡顿或者掉帧现象&#xff0c;降低用户体验&#xff0c;此时就可以将这些耗时操作放到子线程中处理。通常情况下&#xff0c;子线程可以独立…

linux离线安装nacos

1、打开 Nacos-GitHub &#xff0c;点击 Release 可以看到 Nacos 的各版本跟新信息和安装包之类的 点击下载nacos-server-2.4.1.tar.gz&#xff0c;在linux创建nacos文件夹&#xff0c;把下载好的文件上传到nacos文件夹&#xff0c;并通过命令解压:tar -zxvf nacos-server-2.4.…