初始Next.js

版本:

本系列next.js基于的是目前最新版本的 v14 版本,需要 Node.js 18.17 及以后版本

创建项目:

最快捷的创建 Next.js 项目的方式是使用 create-next-app脚手架,你只需要运行:

npx create-next-app@latest&&pnpm create next-app&&yarn create next-app

文件目录及其启动命令

开发的时候使用 npm run dev

部署的时候先使用 npm run build 构建生产代码,再执行 npm run start 运行生产项目。

运行 npm run lint 则会执行 ESLint 语法检查。

执行 next build 将会创建项目的生产优化版本:输出如下

从上图可以看出,构建时会输出每条路由的信息,比如 Size 和 First Load JS。注意这些值指的都是 gzip 压缩后的大小。其中 First Load JS 会用绿色、黄色、红色表示,绿色表示高性能,黄色或红色表示需要优化。

这里要解释一下 Size 和 First Load JS 的含义。正常我们开发的 Next.js 项目,其页面表现类似于单页应用,即路由跳转(我们称之为“导航”)的时候,页面不会刷新,而会加载目标路由所需的资源然后展示,所以:

加载目标路由一共所需的 JS 大小 = 每个路由都需要依赖的 JS 大小 + 目标路由单独依赖的 JS 大小

其中:

  • 加载目标路由一共所需的 JS 大小就是 First Load JS
  • 目标路由单独依赖的 JS 大小就是 Size
  • 每个路由都需要依赖的 JS 大小就是图中单独列出来的 First load JS shared by all

First Load JS = Size + First load JS shared by all

使用官方文档中的介绍就是:

  • Size:导航到该路由时下载的资源大小,每个路由的大小只包括它自己的依赖项
  • First Load JS:加载该页面时下载的资源大小
  • First load JS shared by all:所有路由共享的 JS 大小会被单独列出来

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

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

相关文章

FinalShell 远程连接 Linux(Ubuntu)系统

Linux 系列教程: VMware 安装配置 Ubuntu(最新版、超详细)FinalShell 远程连接 Linux(Ubuntu)系统Ubuntu 系统安装 VS Code 并配置 C 环境 ➡️➡️➡️提出一个问题:为什么使用 FinalShell 连接&#xff0…

Python-VBA函数之旅-filter函数

目录 一、filter函数的常见应用场景: 二、filter函数的使用注意事项: 1、filter函数: 1-1、Python: 1-2、VBA: 2、相关文章: 个人主页:非风V非雨-CSDN博客 一、filter函数的常见应用…

FY-SA-20237·8-ElectricHealing

Translated from the Scientific American, July/August 2023 issue. Electric Healing (电疗) New bandage zaps and medicates chronic wounds 新型创可贴治疗慢性伤口 Paragraph 1 Some wounds won’t heal by themselves. 翻译:一些伤口不会自愈。 解释&…

phpMyadmin 设置显示完整内容

额外选项这里,默认部分内容改成完整内容 方案: 版本>4.5.4.1,修改文件:config.inc.php,添加一行代码: if ( !isset($_REQUEST[pftext])) $_REQUEST[pftext] F;

双向链表详解

目录 带头双向循环链表带头双向循环链表的实现带头双向循环链表的功能实现创造新节点LTNode* CreateLTNode(LTDataType x)代码 初始化链表LTNode*LTInit(LTNode* phead)代码 打印链表void LTPrint(LTNode* phead)代码 链表尾插void LTPushBack(LTNode* phead, LTDataType x)代码…

OpenHarmony 资源调度之内存管理源码分析

作者:张守忠 1 内存管理简介 内存管理部件位于全局资源调度管控子系统中,基于应用的生命周期状态,更新进程回收优先级列表,通过内存回收、查杀等手段管理系统内存,保障内存供给。 1.1 内存管理框架 内存管理部件主要…

韦东山FreeRTOS学习笔记————freertos工程创建

这里写目录标题 一、freertos.c程序结构二、创建任务函数1、动态创建2、静态创建 三、任务调用 一、freertos.c程序结构 1、头文件 2、宏定义、typedef定义… 3、全局变量定义 以下是静态任务的相关变量配置,相当于正点原子例程里的TASK1、TASK2…任务配置 以下…

微信小程序展示倒计时

html <view class"countdown"> <text>倒计时&#xff1a;</text> <text wx:for"{{countdown}}" wx:key"index">{{item}}</text> </view> ts data: {countdown: [], // 存放倒计时数组 targetTime:…

MSSQL 命令行操作说明 sql server 2022 命令行下进行配置管理

说明&#xff1a;本文的内容是因为我在导入Access2019的 *.accdb 格式的数据时&#xff0c;总是出错的背景下&#xff0c;不得已搜索和整理了一下&#xff0c;如何用命令行进行sql server 数据库和用户管理的方法&#xff0c;作为从Access2019 直接导出数据到sql server 数据库…

数据结构(六)----串

目录 1.串的定义 2.串的基本操作 3.串的存储结构 (1)串的定义 •顺序存储 •链式存储 (2)求串长 (3)求子串 (4)比较串的大小 (5)定位操作 4.字符串的模式匹配 (1)朴素模式匹配算法 (2)KMP算法 •求模式串中的next数组&#xff08;重点&#xff09; •练习&#…

【C++】二维数组传参方式

最近刚开始刷剑指offer&#xff0c;刚做到第三题的时候&#xff0c;发现C二维数组的传参方式和C语言略有些不同&#xff0c;所以在这篇博客中&#xff0c;会列出C/C常见的二维数组传参方式。&#xff08;本方式和代码都是基于vs环境所编写&#xff09; 一.C语言二维数组传参方式…

如何将Oracle 中的部分不兼容对象迁移到 OceanBase

本文总结分析了 Oracle 迁移至 OceanBase 时&#xff0c;在出现三种不兼容对象的情况时的处理策略以及迁移前的预检方式&#xff0c;通过提前发现并处理这些问题&#xff0c;可以有效规避迁移过程中的报错风险。 作者&#xff1a;余振兴&#xff0c;爱可生 DBA 团队成员&#x…

React【Day2】

React表单控制 受控绑定 概念&#xff1a;使用React组件的状态&#xff08;useState&#xff09;控制表单的状态 双向绑定 MVVM 报错记录&#xff1a; 错误代码&#xff1a; import { useState } from "react";const App () > {const [value, setValue] useS…

OpenCV从入门到精通实战(八)——基于dlib的人脸关键点定位

本文使用Python库dlib和OpenCV来实现面部特征点的检测和标注。 下面是代码的主要步骤和相关的代码片段&#xff1a; 步骤一&#xff1a;导入必要的库和设置参数 首先&#xff0c;代码导入了必要的Python库&#xff0c;并通过argparse设置了输入图像和面部标记预测器的参数。…

从OWASP API Security TOP 10谈API安全

1.前言 应用程序编程接口&#xff08;API&#xff09;是当今应用驱动世界创新的一个基本元素。从银行、零售、运输到物联网、 自动驾驶汽车、智慧城市&#xff0c;API 是现代移动、SaaS 和 web 应用程序的重要组成部分&#xff0c;可以在面向客 户、面向合作伙伴和内部的应用程…

从零实现诗词GPT大模型:数据集介绍和预处理

专栏规划: https://qibin.blog.csdn.net/article/details/137728228 本章将介绍该系列文章中使用的数据集&#xff0c;并且编写预处理代码&#xff0c;处理成咱们需要的格式。 一、数据集介绍 咱们使用的数据集名称是chinese-poetry&#xff0c;是一个在github上开源的中文诗…

Android开发:Camera2+MediaRecorder录制视频后上传到阿里云VOD

文章目录 版权声明前言1.Camera1和Camera2的区别2.为什么选择Camera2&#xff1f; 一、应用Camera2MediaPlayer实现拍摄功能引入所需权限构建UI界面的XMLActivity中的代码部分 二、在上述界面录制结束后点击跳转新的界面进行视频播放构建播放界面部分的XMLActivity的代码上述代…

一个基于单片机内存管理-开源模块

概述 此模块是一位大佬写的应用于单片机内存管理模块mem_malloc,这个mem_malloc的使用不会产生内存碎片,可以高效利用单片机ram空间。 源码仓库:GitHub - chenqy2018/mem_malloc mem_malloc介绍 一般单片机的内存都比较小,而且没有MMU,malloc 与free的使用容易造成内存碎…

Linux 添加启动服务--Service

1&#xff0c;服务配置service文件 Service 服务的实际作用是开启后自动启动服务&#xff0c;运行一些不须要登录的程序&#xff0c;任务。 实例1、上电自动连接WIFI热点 1.1 新建.service文件 /etc/systemd/system/wificonnect.service [Unit] DescriptionService [wifico…

react 项目路由配置(react-router-dom 版本 v6.3、v6.4)

根据 react-router-dom 的版本&#xff0c;有不同的方式 一、react-router-dom v6.3 用到的主要 api: BrowserRouteruseRoutesOutlet 下面是详细步骤&#xff1a; 1、index.js BrowserRouter 用来实现 单页的客户端路由使用 BrowserRouter 包裹 App放在 顶级 位置&#x…