开发目标
我们将构建一个简化版本的财务仪表板，其内容包括：
公共主页、登录页面、受身份验证保护的仪表板页面、用户可以添加、编辑和删除发票
这篇文章先创建一个简单的nextjs脚手架页面
安装pnpm包管理器
接上一篇，开发环境都准备好之后，我们来做创建项目的准备，首先先判断上一篇的环境是否配置完整，输入 node -v 和 npm -v,我们当前开发采用v20.17.0 版本和10.8.2版本，npm的版本影响不大更新到最新即可，node的版本尽量按照我的参考版本进行。
安装pnpm，这是一个包管理器，它比npm或更快、更高效yarn，npm install -g pnpm，安装完成之后 pnpm -v 查看版本，如果正常输出版本则安装成功。
创建nextjs项目
使用pnpm进行安装新的项目脚手架 npx create-next-app@latest . --use-pnpm ，当使用国内网络进行安装的时候会变得非常的缓慢，一直转圈圈
因此这里需要使用国内的镜像源进行安装，我们这里使用淘宝镜像源地址：https://registry.npmmirror.com
使用命令 pnpm config set registry https://registry.npmmirror.com 将官方源改成淘宝的镜像源地址
然后所有选择按回车键即可，等待下载完毕
运行nextjs项目
在终端命令行执行pnpm run dev即可运行我们的第一个nextjs网站
然而，我们会发现http://localhost:3000 在我们本地浏览器并不能访问，由于我们开发的时候使用的是远程开发，localhost的地址相当于服务端的本地地址，因此在客户端是不能访问的，这里我们需要对package.json文件进行改造一下。
将dev修改为 "dev": "next dev -H 0.0.0.0 -p 80", 也就是下面图片的样子
再次运行pnpm run dev 即可将服务端的网站映射出来，这里我们使用http://172.16.100.104进行访问，这里要注意，IP为你的服务端IP与本教材不一定一样，端口也可能不是80，实际按照自己方便修改，需要注意一下
以上就是nextjs基本项目的创建过程，下一篇将介绍如何改造这个脚手架，变成自己的网站实现需要的功能。
nextjs的一些基本概念
一、什么是npm、pnpm 、npx
npm (Node Package Manager)，npm 是 Node.js 的默认包管理器。它主要用于：安装 JavaScript 包、管理项目依赖、运行脚本
# 安装包
npm install package-name
# 运行脚本
npm run script-name
pnpm (Performant npm)，pnpm 是 npm 的替代品，旨在提高性能和效率：使用硬链接和符号链接来节省磁盘空间，更快的安装速度，更严格的包管理
# 安装 pnpm
npm install -g pnpm
# 使用 pnpm 安装包
pnpm add package-name
npx (Node Package Execute)，npx 是一个 npm 包运行器，它可以：执行本地或远程 npm 包中的命令，无需全局安装就能运行包
# 使用 npx 运行包，无需安装
npx create-react-app my-app
npm: 包管理器，用于安装和管理依赖。
pnpm: npm 的高效替代品，节省空间和提高速度。
npx: 用于执行包，特别是一次性使用的命令行工具。
二、nextjs 基本目录代表含义
详细解释:
1.app/:这是 Next.js 13+版本引入的新的应用目录结构。它包含了你的应用程序的路由和页面组件。
2.next.config.mjs :Next.js 的配置文件，用于自定义Next.js的行为，如添加环境变量、配置 webpack 等。
3. next-env.d.ts :包含 Next.js 类型的TypeScript声明文件，确保TypeScript能正确识别Next.js的类型。
4. node_modules/:存放所有项目依赖的目录，通过npm 或pnpm 安装的包都在这里。
5. package.json:定义项目的元数据、脚本和依赖关系的文件。
6.pnpm-lock.yaml : pnpm 的依赖锁定文件，确保团队成员使用相同版本的依赖。
7.postcss.config.mjs : PostcsS 的配置文件，通常用于配置Tailwind CSS 和其他 cSS 处理工具。
8.README.md:项目的说明文档，通常包含项目描述、安装和使用说明等。
9.tailwind.config.ts :Tailwind CSS 的配置文件，用于自定义Tailwind的主题、变体等。更详细内容查看
独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号
