当前位置： 首页 > news >正文

NextJs教程系列(一)：介绍安装

news 2026/4/21 20:30:17

什么是 Next.js

Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React 组件来构建用户界面，并使用 Next.js 来构建其他功能和优化。

Next.js 的特点

  • 构建全栈 Web 应用程序的 React 框架。
  • 为 React 提供了开箱即用的服务器端渲染。
  • 为 React 提供了开箱即用的静态站点生成。
  • 为 React 提供了开箱即用的路由。

创建新的项目

系统要求，node >= 18.17 或更高版本

  1. 执行npm，按照提示创建项目，建议使用 src 目录来存放源码

    npx create-next-app@latest

  2. 之后会自动生成项目，进入项目目录，你会看到如下的目录结构
    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    • app: 后续所有代码存的放位置。
    • next.config.js: next.config.js存放了next的开发、生产环境下的配置。

  3. 打开package.json, 找到 scripts，可以看到如下npm命令：

    • dev ：运行 next dev 以在开发模式下启动Next.js。
    • build ：运行 next build 以生成用于生产的应用程序。
    • start ：运行 next start 以启动Next.js生产服务器。
    • lint ：运行 next lint 以设置Next.js的内置 ESLint 配置。

  4. 执行 npm run dev，启动项目。

为了方便读者阅读完整的教程，可直接访问作者的教程文档：
http://localhost:3000/ChBlog/docs/category/nextjs

相关文章：

NextJs教程系列(一)：介绍安装

什么是 Next.js Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React 组件来构建用户界面，并使用 Next.js 来构建其他功能和优化。 Next.js 的特点 构建全栈 Web 应用程序的 React 框架。为 React 提供了开箱即用的服务器端渲染。为 React …...

编程日记 2024/3/9 1:33:54

python界面开发 - Menu （popupmenu） 右键菜单

文章目录 1. python图形界面开发1.1. Python图形界面开发——Tkinter1.2. Python图形界面开发——PyQt1.3. Python图形界面开发——wxPython1.4. Python图形界面开发—— PyGTK：基于GTK1.5. Python图形界面开发—— Kivy1.6. Python图形界面开发——可视化工具1.7. …...

编程日记 2024/3/9 1:32:53

微服务架构 | 多级缓存

INDEX 通用设计概述2 优势3 最佳实践 通用设计概述 通用设计思路如下图 内容分发网络（CDN） 可以理解为一些服务器的副本，这些副本服务器可以广泛的部署在服务器提供服务的区域内，并存有服务器中的一些数据。 用户访问原始服务器…...

编程日记 2024/3/9 1:29:51

怎么将pom在文件放到src下方

今天在IDEA从git拉取项目的时候，发现pom.xml文件在文件夹src的上方，平时看惯了项目的pom.xml文件在文件夹src的下方，应该怎么去设置呢？ 点击设置——>点击Folder Always on Top 即可 参考：http://t.csdnimg.cn/s34…...

编程日记 2024/3/9 1:24:48

浅谈网络爬虫与Web安全

网络爬虫(Web Crawler)，又称网络蜘蛛(Web Spider)或网络机器人(Web Robot)，是一种按照一定的规则自动抓取万维网资源的程序或者脚本，已被广泛应用于互联网领域。搜索引擎使用网络爬虫抓取Web网页、文档甚至图片、音频、视频等资源&#xff0c…...

编程日记 2024/3/9 1:21:44

C++vector的使用方法

文章目录 一、vector的介绍1. 文档链接2. 简要介绍 二、vector的使用1.vector的定义（1）构造函数（2）拷贝构造函数（2）赋值重载 2. vector 增删查改（1）operator []（2&#x…...

编程日记 2024/3/9 1:19:43

视频生成模型Sora的全面解析：从AI绘画、ViT到ViViT、DiT、VDT、NaViT、VideoPoet

视频生成模型Sora的全面解析：从AI绘画、ViT到ViViT、DiT、VDT、NaViT、VideoPoet 真没想到，举例视频生成上一轮的集中爆发才过去三个月，没想OpenAI一出手，该领域又直接变天了自打2.16日OpenAI发布sora以来，不但把同时…...

编程日记 2024/3/9 1:16:40

4.1k star，官方出品的redis桌面管理工具——redislnsight

导航 令人抓狂的大key加载RedisInsight 简介RedisInsight的亮点GitHub 地址安装和使用RedisInsight 下载安装 使用RedisInsight redis数据库可视化直观的CLI（Command-Line Interface）日志分析和命令分析 结语参考 令人抓狂的大key加载 工欲善其事必先利…...

编程日记 2024/3/9 1:14:38

论文目录3：大模型时代（2023+）

1 instruction tuning & in context learning 论文名称来源主要内容Finetuned Language Models Are Zero-Shot Learners2021 机器学习笔记：李宏毅ChatGPT Finetune VS Prompt_UQI-LIUWJ的博客-CSDN博客 早期做instruction tuning的work MetaICL: Learning to …...

编程日记 2024/3/9 1:11:36

FPGA IBUFG

IBUFG和IBUFGDS的输入端仅仅与芯片的专用全局时钟输入管脚有物理连接，与普通IO和其它内部CLB等没有物理连接。 所以，IBUFG输入的不能直接接另外信号。 GTH transceiver primitives are called GTHE3_COMMON and GTHE3_CHANNEL in UltraScale FPGAs, an…...

编程日记 2024/3/9 1:09:35

探索数据结构：单链表的实战指南

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯，先赞后看哦~🎈🎈 所属专栏：数据结构与算法 贝蒂的主页：Betty‘s blog 前言 在上一章节中我们讲解了数据结构中的顺序表，知道了顺序…...

编程日记 2024/3/9 1:04:30

短视频矩阵系统----矩阵系统源码搭建（技术门槛？）

短视频矩阵是什么意思？短视频矩阵的含义可以理解为全方位的短视频账号，通过不同的账号实现全方位的品牌展示。实际上是指一个短视频账号，通过不同的链接实现品牌展示，在不同的粉丝流量账号中互相转发同一个品牌，在主账…...

编程日记 2024/3/9 1:03:30

Spring事务注解@Transactional的流程和源码分析

Spring事务简介 Spring事务有两种方式： 编程式事务：编程式事务通常使用编程式事务管理API实现，比如Spring提供的PlatformTransactionManager接口，使用它手工编码去操控事务。声明式事务：注解式事务使用AOP&#xff0…...

编程日记 2024/3/9 1:02:28

在别的地方下载的二次封装Windows镜像怎么安装？GHO镜像详细安装教程

前言 在系统之家或者其他地方下载的镜像文件怎么装到电脑上？ 首先要知道系统之家下载的Windows镜像文件基本上都是.iso结尾的，要进入到对应镜像包才能看出系统镜像是什么格式。 如何分辨镜像的格式 选择对应的.iso镜像，点击【鼠标右键】-【装…...

编程日记 2024/3/9 1:01:27

使用Lerna + Yarn Workspace管理Monorepo项目

1.前言 通常，我们会根据自身业务的实际情况，将通用的组件、逻辑等提取成NPM包，方便以后复用。但这些提取出来的NPM包可能互相之间存在依赖，如果仍然采用 Multirepo 的形式进行管理，则在包的版本管理、依赖管理、调试等…...

编程日记 2024/3/9 0:59:25

如何将gzip后缀压缩包重命名任意后缀名并依然通过gzip.open()读取压缩包文件内容

在 Python 中，gzip.open() 用于解压缩 .gz 后缀的文件。因此，如果您将文件的后缀从 .gz 更改为其他后缀，例如 .diy，然后尝试使用 gzip.open() 打开它，会导致失败，因为 Python 会尝试使用 gzip 解压缩它&…...

编程日记 2024/3/9 0:58:24

C语言从入门到精通 第十一章（文件操作）

写在前面： 本系列专栏主要介绍C语言的相关知识，思路以下面的参考链接教程为主，大部分笔记也出自该教程。除了参考下面的链接教程以外，笔者还参考了其它的一些C语言教材，笔者认为重要的部分大多都会用粗体标注&#xf…...

编程日记 2024/3/9 0:56:23

安装安卓studio无法下载sdk解决方法

安装安卓studio无法下载sdk的解决方法如下： 因为google被墙了，android sdk无法下载。 只要修改host文件，就可以下载sdk了。host文件的位置在：C:\Windows\System32\drivers\etc\hosts host文件添加如下内容： #google_…...

编程日记 2024/3/9 0:55:22

express+mysql+vue,从零搭建一个商城管理系统10--添加商品

提示：学习express，搭建管理系统 文章目录 前言一、新建models/goods.js二、新建routes/goods.js三、添加goods表四、添加商品总结 前言 需求：主要学习express，所以先写service部分 一、新建models/goods.js models/goods.js con…...

编程日记 2024/3/9 0:53:20

java实现大文件的分割与合并

最近遇到一个问题，某网盘上传文件时，文件大小超过了4个G ，不能上传，所以就想到了利用的java的IO流，将文件分割成多个小文件，上传到网盘上，等到需要用的时候，下载下来然后再进行文件的…...

编程日记 2024/3/9 0:52:19

颠覆性突破：如何在Windows上无缝运行Android应用的终极指南

颠覆性突破：如何在Windows上无缝运行Android应用的终极指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾渴望在Windows电脑上直接运行心仪的And…...

编程新知 2026/4/21 18:00:37

Unity场景道具写实

Unity场景道具SuburbNeighborhoodHousePack资源-CSDN下载...

编程新知 2026/4/21 16:43:30

ComfyUI_TensorRT终极指南：3个高效配置技巧实现AI推理性能翻倍

ComfyUI_TensorRT终极指南：3个高效配置技巧实现AI推理性能翻倍 【免费下载链接】ComfyUI_TensorRT 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI_TensorRT ComfyUI_TensorRT是一个专为ComfyUI设计的TensorRT集成插件，通过NVIDIA Tensor…...

编程新知 2026/4/21 15:50:02

如何快速实现Android底部导航栏：BottomNavigation完整指南

如何快速实现Android底部导航栏：BottomNavigation完整指南 【免费下载链接】BottomNavigation This Library helps users to use Bottom Navigation Bar (A new pattern from google) with ease and allows ton of customizations 项目地址: https://gitcode.com/…...

编程新知 2026/4/21 14:51:21

subr_autoconf.c 深度解析：BSD 内核自动配置核心模块

subr_autoconf.c 深度解析：BSD 内核自动配置核心模块 这是 OpenBSD/NetBSD 内核的自动配置（Autoconfiguration）核心实现文件，是内核硬件枚举、设备驱动匹配、设备树构建、热插拔/卸载的中枢代码。我会从核心作用、工作原理、语法规范、上下游依赖、关键数据结构五个维度完…...

编程新知 2026/4/21 10:50:37

Adobe-GenP 3.0终极指南：三步解锁Adobe全家桶的完整教程

Adobe-GenP 3.0终极指南：三步解锁Adobe全家桶的完整教程 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP 你是否曾经面对Adobe Creative Cloud高昂的订阅…...

编程新知 2026/4/21 10:32:17

魔兽争霸3优化工具：如何用WarcraftHelper轻松解决现代电脑兼容性问题

魔兽争霸3优化工具：如何用WarcraftHelper轻松解决现代电脑兼容性问题 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为经典游戏魔兽争…...

编程新知 2026/4/21 10:26:15

Degrees of Lewdity中文整合包：3分钟完成汉化美化全配置

Degrees of Lewdity中文整合包：3分钟完成汉化美化全配置 【免费下载链接】DOL-CHS-MODS Degrees of Lewdity 整合 项目地址: https://gitcode.com/gh_mirrors/do/DOL-CHS-MODS Degrees of Lewdity中文整合包（DOL-CHS-MODS）是一款专为中…...

编程新知 2026/4/21 9:24:20

3分钟掌握QQ音乐解密：qmcdump音频转换完整指南

3分钟掌握QQ音乐解密：qmcdump音频转换完整指南 【免费下载链接】qmcdump 一个简单的QQ音乐解码（qmcflac/qmc0/qmc3 转 flac/mp3），仅为个人学习参考用。 项目地址: https://gitcode.com/gh_mirrors/qm/qmcdump 你是否曾经下…...

编程新知 2026/4/21 8:23:34

告别手动写提示词：AI头像生成器帮你快速设计专属头像

告别手动写提示词：AI头像生成器帮你快速设计专属头像 1. 为什么你需要AI头像生成器 在数字社交时代，头像已经成为个人品牌的重要组成部分。无论是社交媒体、工作平台还是游戏社区，一个精心设计的头像能让你在众多用户中脱颖而出。然而&…...

编程新知 2026/4/21 7:05:53