【Next】2. 项目构建

news/2024/9/19 8:16:52/ 标签: javascript

打开 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.ppmy.cn/news/1521503.html

相关文章

【2024数模国赛赛题思路公开】国赛A题思路丨附可运行代码丨无偿自提

2024年国赛A题解题思路 【题目分析】 问题1&#xff1a;舞龙队沿螺距为55 cm的等距螺线顺时针盘入&#xff0c;给出300秒内舞龙队每秒的位置和速度 分析思路&#xff1a; 螺线方程&#xff1a; 需要建立螺线方程&#xff0c;以便描述龙头及每节板凳的位置。螺线是基于极坐标系…

uni-app应用更新(Android端)

关于app更新&#xff0c;uni-app官方推荐的是 uni-upgrade-center&#xff0c;看了下比较繁琐&#xff0c;因此这里自己实现检查更新并下载安装的逻辑。 1.界面效果 界面中的弹框和 进度条采用了uView 提供的组件 2.检查更新并下载安装 一、版本信息配置在服务端&#xff0c…

【Spring】Spring MVC 入门(2)

本系列共涉及4个框架&#xff1a;Sping,SpringBoot,Spring MVC,Mybatis。 博客涉及框架的重要知识点&#xff0c;根据序号学习即可。 目录 本系列共涉及4个框架&#xff1a;Sping,SpringBoot,Spring MVC,Mybatis。 博客涉及框架的重要知识点&#xff0c;根据序号学习即可。…

论文解读 | KDD2024 演化图上的森林矩阵快速计算

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击 阅读原文 观看作者直播讲解回放&#xff01; 作者简介 孙浩鑫&#xff0c;复旦大学博士生&#xff0c;主要研究方向为大规模图上快速算法设计。 概述 森林矩阵在网络科学、观点动力学和机器学习相关应用中…

docker将容器保存为镜像

docker如何将运行的容器保存为镜像 docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG]] 其中&#xff1a; [OPTIONS] 是可选参数&#xff0c;如 -m 用于提供提交信息。 CONTAINER 是要提交的容器的ID或名称。 [REPOSITORY[:TAG]] 是新镜像的仓库名和标签&#xff0c;如果…

翻译论文的关键部分 | Parallel Tiled QR Factorization for Multicore Architectures

SSRFB DTSQT2 DLARFB DGEQT2 1, 对角子矩阵分解 DGEQT2 这个例程被开发出来&#xff0c;用于针对对角Tile子矩阵&#xff1a; &#xff0c;执行不分块的QR分解。 这个运算产生&#xff1a; 一个上三角矩阵 一个酉下三角矩阵&#xff0c;这个矩阵包含 b 个 Householder 反光面…

力扣96-不同的二叉搜索树(Java详细题解)

题目链接&#xff1a;96. 不同的二叉搜索树 - 力扣&#xff08;LeetCode&#xff09; 前情提要&#xff1a; 因为本人最近都来刷dp类的题目所以该题就默认用dp方法来做。 dp五部曲。 1.确定dp数组和i下标的含义。 2.确定递推公式。 3.dp初始化。 4.确定dp的遍历顺序。 …

2024下半年软考中级【软件设计师】备考攻略

备考软件设计师&#xff0c;准备好复习资料&#xff0c;就是教材真题考试大纲三件套&#xff0c;然后再加3个月左右的复习长度&#xff0c;保证每一天2个小时的复习时间&#xff01; 首先&#xff0c;需要准备的资料书是教材。虽然教材很厚很厚&#xff0c;厚到不想看&#xf…

zdppy+vue3+onlyoffice文档管理系统实战 20240905 上课笔记 权限校验中间件开始

目前 1、登录功能基本完成2、缺对token的校验 如何校验token 必须保证token是有效的&#xff1a; 1、防止篡改&#xff0c;也就是能够重新解析为加密前的内容2、过期校验&#xff0c;token必须在有效期内3、可做可不做&#xff0c;必须保证token里面的用户名和用户ID能够匹…

何为图像处理,有哪些处理方法

图像处理是计算机科学中的一个重要领域&#xff0c;涉及到图像的获取、处理、分析和理解。在深度学习和计算机视觉中&#xff0c;图像处理技术尤为重要&#xff0c;它为图像识别、图像生成等高级任务提供了基础支持。图像处理方法包括图像增强、图像滤波和图像分割等。图像处理…

leetcode第142题:环形链表 ||(C语言+引申问题全解)

思路1&#xff08;思路难、代码简单&#xff09;&#xff1a; slow一次走一步&#xff0c;fast一次走两步&#xff1b;相遇时搞个meet&#xff0c;再搞一个head&#xff0c;head和meet一起走&#xff0c;每次走一步&#xff1b;head、meet相遇处&#xff0c;即为结果。 思路解释…

020 现代数据中心的路由与交换架构

引言 现代数据中心的设计必须兼顾高性能、高可用性和灵活性&#xff0c;以满足云计算、大数据、人工智能等应用的需求。在这样的背景下&#xff0c;数据中心的路由与交换架构设计显得尤为重要。Spine-Leaf架构、BGP路由优化以及高密度虚拟化环境中的交换技术&#xff0c;成为了…

HarmonyOS开发实战( Beta5.0)DevEco Device Tool开发环境搭建实践

通常在嵌入式开发中&#xff0c;很多开发者习惯于使用Windows进行代码的编辑&#xff0c;比如使用Windows的Visual Studio Code进行OpenHarmony代码的开发。但当前阶段&#xff0c;大部分的开发板源码还不支持在Windows环境下进行编译&#xff0c;如Hi3516、Hi3518系列开发板。…

基于智能巡检机器人的算力评估指标及其应用场景分析

随着工业自动化和智能化的发展&#xff0c;智能巡检机器人在各类复杂环境中的应用日益广泛。机器人通常需要在复杂、多变的环境中自主执行任务&#xff0c;如设备检测、数据采集、故障诊断等。为了确保巡检机器人的高效运行&#xff0c;计算能力&#xff08;算力&#xff09;的…

数据分析面试常见50个问题及解答要点(五)

为了帮助各位学习数据分析的小伙伴们成功拿到offer&#xff01;本期给大家整理了一些数据分析面试时的高频问题&#xff0c;分享给大家 数据分析高频面试50题&#xff0c;点击下方链接进行下载完整版&#xff0c;下面展示部分面试题&#xff0c;希望大家积极点赞收藏加关注&…

react自学(6) 部署到tomcat中

1.设置项目名 在package.json文件配置 "homepage": "/myapp"2.设置Router类型 说明&#xff1a;由于本文是写部署tomcat&#xff0c;因此使用HashRouter类型&#xff0c;不然会出现空白&#xff1b;如果使用springboot或在apche/nginx&#xff0c;则可以…

从 ES|QL 到 Python 中的原生 Pandas 数据帧

作者&#xff1a;来自 Elastic Quentin Pradet 自 Elasticsearch 8.15 或 Elasticsearch Serverless 以来&#xff0c;ES|QL 响应支持 Apache Arrow 流式传输格式。这篇博文将向你展示如何在 Python 中利用它。在之前的一篇博文中&#xff0c;我演示了如何使用 CSV 作为中间表示…

win11环境android studio中AVD目录修改问题解决

起始原因是我搭建Android studio 调试一个app时&#xff0c;运行模拟器时 出现“The emulator process for AVD xxx has terminated.”的错误 DEBUG | trying to load skin file D:\android\skins\\pixel_6\layout ERROR | Not enough space to create userdata partition…

STM32 系列MCU 开发利器 STM32CubeIDE

前言 由于自己接触较多的 ARM 系列芯片主要是 STM32 系列的&#xff0c;接触过 STM32 F1、F4、L4、H7 等几个系列&#xff0c;使用的 开发工具&#xff0c;主要是 Keil MDK5、IAR&#xff0c;所以也比较关注开发工具的使用。 Keil MDK5、IAR 属于商用收费的功能强大的IDE&…

Ubuntu服务器时间和本地时间不一致怎么解决——Linux的Local Time和RTC time

最近一直在搞大模型的相关工作&#xff0c;所以一直在用Linux服务器&#xff0c;前面的文章里也提到了&#xff0c;我用的是一台Dell PowerEdge R730xd。 但在使用中发现&#xff0c;IDRAC中的日志时间和本地时间存在时差&#xff0c;大概相关8小时。 对于技术人员&#xff0c…