Administrator
发布于 2024-10-08 / 36 阅读
0
0

Next.js 零基础教程2 脚手架创建方法

开发目标

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

这篇文章先创建一个简单的nextjs脚手架页面
NextJS默认页面

安装pnpm包管理器

接上一篇,开发环境都准备好之后,我们来做创建项目的准备,首先先判断上一篇的环境是否配置完整,输入 node -vnpm -v,我们当前开发采用v20.17.0 版本和10.8.2版本,npm的版本影响不大更新到最新即可,node的版本尽量按照我的参考版本进行。
npm版本号
安装pnpm,这是一个包管理器,它比npm或更快、更高效yarn,npm install -g pnpm,安装完成之后 pnpm -v 查看版本,如果正常输出版本则安装成功。
pnpm版本号

创建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,实际按照自己方便修改,需要注意一下
运行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” 微信公众号
公众号二维码


评论