Next.js 零基础开发入门教程2 构建基础脚手架 2024最新更新中

开发目标

我们将构建一个简化版本的财务仪表板，其内容包括：
公共主页、登录页面、受身份验证保护的仪表板页面、用户可以添加、编辑和删除发票

这篇文章先创建一个简单的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” 微信公众号