React + Next.js 搭建项目(配有对比介绍一起食用)
文章标题
- 01 Next.js 是什么
- 02 Next.js 搭建工具 create-next-app
- 03 create-react-app 与 create-next-app 的区别
- 04 快速构建 Next.js 项目
- 05 App Router 与 Pages Router 的区别
01 Next.js 是什么
Next.js
是一个 React
框架,它允许你使用 React
框架建立超强的、有利于 SEO
的、极度面向用户的静态网站和网络应用。Next.js
以在构建具有你所需要的所有功能的生产就绪的应用程序时的最佳开发者体验而闻名。
它具有混合静态和服务器渲染、TypeScript
支持、智能捆绑、路由预取等功能,无需额外配置。
02 Next.js 搭建工具 create-next-app
官方建议使用 create-next-app 创建新的 Next.js
应用程序,它会自动为你设置所有内容。创建项目,请运行:
# 确保你已经安装了 npx (npx 从 npm 5.2.0 开始默认安装)
npx create-next-app
# or
yarn create next-app
03 create-react-app 与 create-next-app 的区别
- create-
- 简介:它是 React 团队官方出的一个构建 React 单页面应用的脚手架工具,即一个官方支持的创建 React 单页应用程序的方法。
- 集成:它本身集成了 Webpack,并配置了一系列内置的 loader 和默认的 npm 的脚本,可以很轻松的实现零配置就可以快速开发 React 的应用。
- 优势: 官方出品、零配置、简单轻松上手易于学习、易于部署
- 缺点:需要手动配置路由&状态管理&代码分割&样式文件等、对搜索引擎优化不好 create-
- 简介:它由 Next.js 的创建者正式维护,能够快速开始构建新的 Next.js 应用程序,并为您设置好一切,并包括交互式体验、零依赖、离线支持等好处。
- 优势: 官方推荐、零配置、对 SEO 友好、支持服务器端预渲染
- 缺点:使用起来更复杂、扩展取依赖于服务器、没有丰富的插件生态系统
react
-app next
-app 04 快速构建 Next.js 项目
$ npx create-next-app# 若还未安装 create-next-app ,则需要先安装以下软件包:
Need to install the following packages:create-next-app
Ok to proceed? (y) y# 项目名称
√ What is your project named? ... my-app# 是否需要使用 TypeScript
√ Would you like to use TypeScript? ... No / Yes ✔# 是否需要使用 ESLint
√ Would you like to use ESLint? ... No / Yes ✔# 是否需要使用 Tailwind CSS(https://www.tailwindcss.cn/)只需书写 HTML 代码,无需书写 CSS
# 本质上是一个工具集,包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类,可以组合使用并直接在 HTML 代码上实现任何 UI 设计。
√ Would you like to use Tailwind CSS? ... No / Yes ✔# 是否需要在项目中使用 src 目录,若不使用 src 目录默认会把所有文件放在根目录,为了方便开发,这里启用 src 目录
√ Would you like to use `src/` directory? ... No / Yes ✔# 是否使用 App Router,若选择 No 则默认是 Pages Router(具体区别在下面,可以先简单看下再选择)
√ Would you like to use App Router? (recommended) ... No ✔ / Yes# 是否启用路径别名
√ Would you like to customize the default import alias? ... No / Yes ✔# 希望配置什么导入别名(默认是 @/*,若不修改默认别名则直接回车)
√ What import alias would you like configured? ... @/*# 完成配置选择后,下面工具将会根据上述配置进行项目搭建
Creating a new Next.js app in E:\xxx\my-app.Using npm.
# 若上述选择了 App Router 则模板初始化项目为 app-tw,若没选择则模板初始化项目为 default-tw
#(下面会展示对应模板的初始化目录)
Initializing project with template: default-twInstalling dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-nextadded 326 packages, and audited 327 packages in 2m117 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities
Initialized a git repository.Success! Created my-app at E:\xxx\my-app
搭建成功后,切换到对应目录即可运行项目了
$ npm run dev
# or
$ yarn dev
# or
$ pnpm dev
05 App Router 与 Pages Router 的区别
- App Router:在 src 目录下启用 app 目录,默认会放一些框架相关的东西,并在该目录中生成首页内容(src/app/page.tsx)
- 1) 简介:在版本13中,Next.js 引入了一个新的基于 React Server 组件的应用路由器,它支持共享布局、嵌套路由、加载状态、错误处理等等。App Router 工作在一个名为 app 的新目录中。app 目录与 pages 目录一起工作,以允许增量采用。这允许你选择应用程序的一些路由为新行为,同时将其他路由保留在pages目录中为以前的行为。
- 2) 注意: App 路由器优先于 Pages 路由器。跨目录的路由不应该解析为相同的 URL 路径,这样会导致构建时报错来防止冲突。
- 3) 补充:在 App Router 中,NextJS 将会区分 Client 组件和 Server 组件。 Server 组件是一种特殊的 React 组件,它 不在浏览器端运行,而是只能在服务器端运行。又因为它们没有状态,所以不能使用只存在于客户端的特性(也就是说 useState、useEffect 那些都是用不了的),所以一般我们可以用于获取数据,或者对组件进行渲染(比如你要渲染 markdown 那对应的 JavaScript 依赖就只存在于客户端),从而达到减少客户端体积的作用,这是一种性能优化,允许您轻松地采用它们。同时默认情况下,app 中的组件是Server 组件,但您还可以使用客户端组件,若要使用客户端组件就需要加上 use client,但实际上这个命令时候影响到子组件的,也就是说如果你父组件加上了 use client,那么这个文件下所有的子组件就算不加上这个指令,那它也是客户端组件了,为此我们需要合理规划 Layout,把客户端端组件利用 Layout 给抽离出去。
- 4) 建议: 如果您是服务器组件的新手,请查看 服务器组件和客户端组件相关信息。
- 5) 选择该模式后的初始化目录结构如下:
PagesRouter:在 src 目录下启用 pages 目录,默认会放 api 等文件,并在该目录中生成首页内容(src/pages/index.tsx)。 - 1) 简介:Pages Route r有一个基于文件系统的路由器,它基于页面的概念。当一个文件被添加到 pages 目录时,它会自动作为路由可用。在 Next.js 中,页面是从 pages 目录下的
.js
、.jsx
、.ts
或.tsx
文件中导出的 React 组件,每个页面都根据其文件名与路由相关联。(也是大家之前可能常用的一种模式) - 2) 选择该模式后的初始化目录结构如下:
相关文章:
React + Next.js 搭建项目(配有对比介绍一起食用)
文章标题 01 Next.js 是什么02 Next.js 搭建工具 create-next-app03 create-react-app 与 create-next-app 的区别04 快速构建 Next.js 项目05 App Router 与 Pages Router 的区别 01 Next.js 是什么 Next.js 是一个 React 框架,它允许你使用 React 框架建立超强的…...
【Java】Java基础
环境准备 安装JDK和JRE 下载JDK,可以在官网Java Downloads | Oracle 中国下载,但是这里需要注册才能够下载。在Index of java-local/jdk (huaweicloud.com)也可以下载到,但是版本比较老,关系不大,直接下载࿰…...
Spring-SpringBoot-SpringMVC-MyBatis常见面试题
文章目录 Spring篇springbean是安全的的?什么是AOP你们工作中有用过AOP吗spring中的事务是如何实现的spring中事务失效场景Spring的生命周期spring中的循坏依赖springMVC的执行流程springboot的启动原理常用注解MyBatis执行流程Mybatis是否支持延迟加载?Mybatis的一…...
15.MyCat数据库分片
MyCat 是一个开源的数据库中间件,主要用于将数据库操作请求路由和分发到后端的多个数据库节点。 1.Mycat环境搭建 在两个不同数据库中创建相同表 下载mycat https://github.com/MyCATApache/Mycat-Serverhttps://github.com/MyCATApache/Mycat-Server 将下…...
【Python】PySpark
前言 Apache Spark是用于大规模数据(large-scala data)处理的统一(unified)分析引擎。 简单来说,Spark是一款分布式的计算框架,用于调度成百上千的服务器集群,计算TB、PB乃至EB级别的海量数据…...
pycharm 打开Terminal时报错activate.ps1,因为在此系统上禁止运行脚本,并因此无法进入虚拟环境
pycharm 打开Terminal时报错activate.ps1,因为在此系统上禁止运行脚本,并因此无法进入虚拟环境 如下图所示: 网上说可以set_restrictFalse什么的,虽然也可但可能会降低电脑安全性,可以将下面的终端改为cmd.exe即可...
[C++][C#]yolox TensorRT C++ C#部署
YOLOX是一种新型的高性能探测器,由开发者Zheng Ge、Songtao Liu、Feng Wang、Zeming Li和Jian Sun在《YOLOX: Exceeding YOLO Series in 2021》首次提出。与YOLOV5和YOLOV8相比,YOLOX具有更高的性能和更好的平衡,在速度和精度方面都表现出优越…...
根据源码,模拟实现 RabbitMQ - 网络通讯设计,自定义应用层协议,实现 BrokerServer (8)
目录 一、网络通讯协议设计 1.1、交互模型 1.2、自定义应用层协议 1.2.1、请求和响应格式约定 编辑 1.2.2、参数说明 1.2.3、具体例子 1.2.4、特殊栗子 1.3、实现 BrokerServer 1.3.1、属性和构造 1.3.2、启动 BrokerServer 1.3.3、停止 BrokerServer 1.3.4、处…...
MongoDB入门
简介 MongoDB是一个开源、高性能、支持海量数据存储的文档型数据库 是NoSQL数据库产品中的一种,是最像关系型数据库(MySQL)的非关系型数据库 内部采用BSON(二进制JSON)格式来存储数据,并支持水平扩展。 MongoDB本身并不是完全免费的,它对于…...
vr智慧党建主题展厅赋予企业数字化内涵
现如今,VR全景技术的发展让我们动动手指就能在线上参观博物馆、纪念馆,不仅不用受时间和空间的限制,还能拥有身临其境般的体验,使得我们足不出户就能随时随地学习、传承红色文化。 很多党建展厅都是比较传统的,没有运用…...
go中mutex的sema信号量是什么?
先看下go的sync.mutex是什么 type Mutex struct {state int32sema uint32 } 这里面有个sema,这个就是信号量。 什么是信号量? 什么是信号量?_kina100的博客-CSDN博客 其实通俗的来说,信号量就是信号灯,但是他不是…...
LeetCode笔记:Weekly Contest 360
LeetCode笔记:Weekly Contest 360 0. 吐槽1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 1. 解题思路2. 代码实现 比赛链接:https://leetcode.com/contest/weekly-contest-360/ 0.…...
【树DP】2021ICPC南京 H
Problem - H - Codeforces 题意: 思路: 这题应该算是铜牌题 铜牌题 简单算法 基础思维 简单复盘一下思路 首先,我们发现有个很特殊的条件: ti < 3 然后看一下样例: 注意到,对于一个结点 u &#…...
Leedcode19. 删除链表的倒数第 N 个结点
给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5] 示例 2: 输入:head [1], n 1 输出:[] 示例 3: 输入࿱…...
Mysql-索引查询相关
一、单表查询 1.1 二级索引为null 不论是普通的二级索引,还是唯一二级索引,它们的索引列对包含 NULL 值的数量并不限制,所以我们采用key IS NULL 这种形式的搜索条件最多只能使用 ref 的访问方法,而不是 const 的访问方法 1.2 c…...
C++ Pimpl
Pimpl(Pointer to implementation,指向实现的指针) 是一种减少代码依赖和编译时间的C编程技巧,其基本思想是将一个外部可见类(visible class)的实现细节(一般是所有私有的非虚成员)放在一个单独的实现类(implementation class)中&…...
rust学习-类型转换
基本类型转换 // 不显示类型转换产生的溢出警告。 #![allow(overflowing_literals)]fn main() {let decimal 65.4321_f32;// 错误!不提供隐式转换// let integer: u8 decimal;// 可以显式转换let integer decimal as u8;let character integer as char;println…...
算法通过村第四关-栈青铜笔记|手写栈操作
文章目录 前言1. 栈的基础概要1.1 栈的特征1.2 栈的操作1.3 Java中的栈 2. 栈的实现(手写栈)2.1 基于数组实现2.2 基于链表实现2.3 基于LinkedList实现 总结 前言 提示:我自己一个人的感觉很好 我并不想要拥有你 除非你比我的独处更加宜人 --…...
Python计算加速利器
迷途小书童的 Note 读完需要 6分钟 速读仅需 2 分钟 1 简介 Python 是一门应用非常广泛的高级语言,但是,长久以来,Python的运行速度一直被人诟病,相比 c/c、java、c#、javascript 等一众高级编程语言,完全没有优势。 那…...
PyTorch 深度学习实践 第10讲刘二大人
总结: 1.输入通道个数 等于 卷积核通道个数 2.卷积核个数 等于 输出通道个数 1.单通道卷积 以单通道卷积为例,输入为(1,5,5),分别表示1个通道,宽为5,高为5。假设卷积核大小为3x3,…...
Linux特殊指令
目录 1.dd命令 2.mkfs格式化 3.df命令 4.mount实现硬盘的挂载 5.unshare 1.dd命令 dd命令可以用来读取转换并输出数据。 示例一: if表示infile,of表示outfile。这里的/dev/zero是一个特殊文件,会不断产生空白数据。 bs表示复制一块的大…...
MPI之主从模式的一般编程示例
比如,我们可以选举0号进程为master进程,其余进程为slaver进程 #include "mpi.h" #include <unistd.h> #include <iostream>int main(int argc, char *argv[]) {int err MPI_Init(&argc,&argv);int rank,size;MPI_Comm_r…...
基于野狗算法优化的BP神经网络(预测应用) - 附代码
基于野狗算法优化的BP神经网络(预测应用) - 附代码 文章目录 基于野狗算法优化的BP神经网络(预测应用) - 附代码1.数据介绍2.野狗优化BP神经网络2.1 BP神经网络参数设置2.2 野狗算法应用 4.测试结果:5.Matlab代码 摘要…...
C语言面向对象的编程思想
面向对象编程 面向对象编程Object-Oriented Programming,OOP) 作为一种新方法,其本质是以建立模型体现出来的抽象思维过程和面向对象的方法。模型是用来反映现实世界中事物特征的。任何一个模型都不可能反映客观事物的一切具体特征࿰…...
MPI之非阻塞通信中通信完成检测接口简介
在之前的文章中,简单的写了一个非阻塞的通信代码介绍最最基本的使用: int main(int argc, char *argv[]) {int err MPI_Init(&argc,&argv);int rank,size;MPI_Comm_rank(MPI_COMM_WORLD,&rank);MPI_Comm_size(MPI_COMM_WORLD, &size);…...
Excel:如何实现分组内的升序和降序?
一、POWER 1、构建辅助列D列,在D2单元格输入公式: -POWER(10,COUNTA($A$2:A2)3)C2 2、选中B1:D10,注意不能宣导A列的合并单元格,进行以下操作: 3、删除辅助列即可 二、COUNTA 第一步,D2建立辅助列…...
深度学习论文: Segment Any Anomaly without Training via Hybrid Prompt Regularization
深度学习论文: Segment Any Anomaly without Training via Hybrid Prompt Regularization Segment Any Anomaly without Training via Hybrid Prompt Regularization PDF: https://arxiv.org/pdf/2305.10724.pdf PyTorch代码: https://github.com/shanglianlm0525/CvPytorch Py…...
【算法训练-字符串】一 最长无重复子串
废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是最长无重复子串或最长无重复子数组,这类题目出现频率还是很高的。 最长无重复子串【MID】 先来看字符串数据结构的题目 题干 解题思…...
【数据结构】手撕顺序表
一,概念及结构 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构,一般情况下采用数组存储; 在数组上完成数据的增删查改。 1, 静态顺序表:使用定长数组存储元素。 2.,动态顺序表࿱…...
景联文科技数据标注:人体关键点标注用途及各点的位置定义
人体关键点标注是一种计算机视觉任务,指通过人工的方式,在指定位置标注上关键点,例如人脸特征点、人体骨骼连接点等,常用来训练面部识别模型以及统计模型。这些关键点可以表示图像的各个方面,例如角、边或特定特征。在…...
typescript基础之never
TypeScript 的 never 类型是一种特殊的类型,它表示的是那些永远不存在的值的类型。例如,一个抛出异常或无限循环的函数的返回值类型就是 never,因为它们永远不会返回任何值。never 类型是所有类型的子类型,也就是说,任…...
电子电路学习笔记之NCP304LSQ37T1G ——超低电流电压检测器
超低电流电压检测器是一种专门用于检测极小电流值的设备。它们常用于电子元件或电路中,用于监测电流的存在和程度。这些检测器通常具有高灵敏度和高精度,能够测量微安级别或更小的电流。 超低电流电压检测器的应用领域广泛,例如电池管理系统…...
【计算机组成原理】一文快速入门,很适合JAVA后端看
作者简介: CSDN内容合伙人、CSDN新星计划导师、JAVA领域优质创作者、阿里云专家博主,计算机科班出身、多年IT从业经验、精通计算机核心理论、Java SE、Java EE、数据库、中间件、分布式技术,参加过国产中间件的核心研发,对后端有…...
10万字智慧政务大数据平台项目建设方案222页[Word]
导读:原文《10万字智慧政务大数据平台项目建设方案222页[Word]》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 1.1 项目建设目标 推进市一级政府搭建数字政府建设的规划要求,结合市一级政府“互联网+政务服务”建设…...
Python-主线程控制子线程-4
需求:在Python-主线程控制子线程-3的基础上,新增使用UDP接收指令功能,代替从键盘输入指令 # 修改后的程序,主线程可以获取子线程的结果 import threading import time import queue import tracebackfrom loguru import logger i…...
设计模式二十二:策略模式(Strategy Pattern)
定义一系列算法,将每个算法封装成独立的对象,并使这些对象可互相替换。这使得在运行时可以动态地选择算法,而不必改变使用算法的客户端代码。策略模式的主要目标是将算法的定义与使用分离,使得客户端可以根据需要灵活地选择和切换…...
【c语言】结构体内存对齐,位段,枚举,联合
之前学完结构体,有没有对结构体的大小会很疑惑呢??其实结构体在内存中存储时会存在内存对齐,捎带讲讲位段,枚举,和联合,跟着小张一起学习吧 结构体内存对齐 结构体的对齐规则: 第一个成员在与结…...
干货丨软件测试行业迎来新时代,AI将成为主流技术?
随着科技日新月异的发展,人工智能正逐渐渗透到我们生活的各方各面,从智能语音助手到自动驾驶汽车、从智能家居到人脸识别技术,AI正以其卓越的智能和学习能力引领着新时代的发展方向。 在这个快速演进的时代中,软件测试领域也受到了…...
MacOS goland go1.21 debug问题
安装dlv brew install dlv 安装之后在终端会显示所在目录 类似/usr/local/Cellar/delve/1.21.0/bin 配置goland 在文件系统中找到goland 右击选择show package contents -> Contents -> plugins -> go 尝试替换 其中对应系统 的 dlv 结果还是不行 然后打开应用gol…...
python 笔记(1)——基础和常用部分
目录 1、print 输出不换行 2、格式化输出字符串 3、浮点数的处理 4、进制转换和ASCII与字符间的转换 5、随机数 6、字符串截取和内置方法 6-1)字符串截取 6-2)字符串内置方法 7、元组、列表,及其遍历方式 7-1)列表常用内…...
kafka架构和原理详解
Apache Kafka 是一个分布式流数据平台,用于高吞吐量、持久性、可扩展的发布和订阅消息。它具有高度的可靠性,被广泛用于构建实时数据流处理、日志收集和数据管道等应用。 基本架构 1. 主题(Topic): 主题是消息的逻辑分类生产者将消息发布到特定的主题中,而消费者可以订阅…...
wsl Ubuntu中非root的普通用户怎么直接执行docker命令
docker需要root权限,如果希望非root用户直接使用docker命令,而不是使用sudo,可以选择将该用户加入到docker用户组。 sudo groupadd docker:添加到groupadd用户组(已经有docker用户组,所以可以不用再新增do…...
Web开发模式、API接口、restful规范、序列化和反序列化、drf安装和快速使用、路由转换器(复习)
一 Web开发模式 1. 前后端混合开发模式 前后端混合开发模式是一种开发方式,将前端和后端的开发工作结合在一起,以加快项目的开发速度和 提高协作效率。这种模式通常用于快速原型开发、小型项目或敏捷开发中。在前后端混合开发模式中,前端和…...
<AMBA总线篇> AXI总线协议介绍
目录 01 AXI协议简介 AXI协议特性 AXI协议传输特性 02 AXI协议架构 AXI协议架构 write transaction(写传输) read tramsaction(读传输) Interface and interconnect 典型的AXI系统拓扑 03 文章总结 大家好,这里是程序员杰克。一名平平无奇的嵌入式软件工程…...
一个简单的Python网络爬虫教程
网络爬虫是一种自动获取网页内容的程序,它可以从互联网上的网站中提取数据并进行分析。本教程将带您逐步了解如何使用 Python 构建一个简单的网络爬虫。 注意:在进行网络爬虫时,请遵守网站的使用条款和法律法规,避免对目标网站造…...
YARN资源管理框架论述
一、简介 为了实现一个Hadoop集群的集群共享、可伸缩性和可靠性,并消除早期MapReduce框架中的JobTracker性能瓶颈,开源社区引入了统一的资源管理框架YARN。 YARN是将JobTracker的两个主要功能(资源管理和作业调度/监控)分离&…...
Unity查找资源依赖关系
这个方法主要是发现资源乱用的情况,对应的逻辑可能要改一个才能用到自己的项目里面 [MenuItem("Tools/Prefab/查找选中资源依赖关系", false, 0)] public static void FindDependencies() { foreach (var guid in Selection.assetGUIDs…...
【操作系统】聊聊局部性原理是如何提升性能的
对于目前数据主导的系统,大多数都是Java/Go 技术栈MySQL,但是随着时间的推移,数据库数据的数据量过多,并且会频繁访问热点数据,为了提升系统的性能,一般都是加入缓存中间件、Redis。 局部性原理 我们知道…...
多线程应用——单例模式
单例模式 文章目录 单例模式一.什么是单例模式二.如何实现1.口头实现2.利用语法特性 三.实现方式(饿汉式懒汉式)1.饿汉式2.懒汉式3.线程安全的单例模式4.双重检查锁5.禁止指令重排序 一.什么是单例模式 单例模式(Singleton Patternÿ…...
几种在JavaScript中创建对象的方式!
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 字面量方式⭐ 构造函数方式⭐ Object.create()方式⭐ 工厂函数方式⭐ ES6类方式⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门…...