Next.js 实战开发入门 1 开发环境部署

开发目标

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

开发环境配置

开发客户端 Windows 10 (不限系统，兼容vscode即可)
开发服务端 Ubuntu 24.04 (不限系统，兼容node即可)
开发工具 Vscode Version: 1.93.1 下载地址

安装和配置开发环境

安装完成vscode 是这个样子的，接下来主要就是使用vscode对网站进行开发

我们这里采用远程开发，网站的服务端使用linux服务器，这样开发好代码能更好的迁移到服务器进行部署，在真实环境中大部分这类服务都是采用linux进行部署，因此这样开发更真实。

这里我们使用Ubuntu 24.04 作为我们的开发服务端，你也可以选择centos 获取其他服务器，不限选择，只要能运行node服务端就行

配置 vscode 远程连接

准备完成开发工具和服务器之后，开始在vscode配置远程开发插件，点击左边插件目录，然后在搜索框里面搜索 Remote - SSH ，点击 Install 即可安装。

安装完成之后，vscode左边栏目会出现，Remote - SSH 的图标

点击上方的+号添加远程服务器连接

这时候我们切换到服务器中，查看服务器的IP地址，在命令行中输入ifconfig,我这台服务器地址为 172.16.100.104

在Vscode 上方提示输入地址栏中输入 ssh root@172.16.100.104 -A

命令 ssh root@172.16.100.104 -A 的含义如下：

1.ssh：这是用于安全远程登录的命令，SSH（Secure Shell）协议允许用户安全地访问远程计算机。

2.root：这是要登录的用户账户名。在这个例子中，您正在以 root 用户身份登录。root 是 Linux 系统中的超级用户，具有所有权限。

3. @：这是分隔符，用于将用户名与主机地址分开。172.16.100.104：这是目标主机的 IP 地址，您要连接的远程计算机的地址。

5. -A：这是一个选项，表示启用 SSH代理转发。代理转发允许您在连接到远程主机后，使用本地计算机上的 SSH 密钥进行身份验证，而无需在远程主机上存储密钥。这在需要通过多台主机进行 SSH 连接时非常有用。

输入完成之后，右下角会跳出连接，点击连接即可连接到远程服务器

点击连接之后，一直安装提示点击，直到出现密码，输入密码即可，等待下载服务器配置完整，即可远程连接到服务端

当出现打开目录，而且目录为服务端则为连接成功

配置服务端 nodejs 环境

打开Linux 终端命令行，输入node命令测试，如果已经安装了则下一步，如果没安装则从这里开始进行

使用APT进行安装，这里的命令是Ubuntu的命令 apt install nodejs，如果centos则 yum install nodejs

在Ubuntu终端输入：node -v 查看版本号

安装完成node 并且查到版本号显示正常之后，发现版本为18.19.1 或者其他，由于node的项目对版本有要求，不同版本会导致各种bug，因此需要固定开发版本，如何在一台机器上面运行多个版本的node，这里我们要按照 nvm 进行切换到lts版本的node

安装 nvm 工具切换node版本

下载nvm安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
如果遇到网络出现问题，则需要使用代理进行下载，如：
proxychains curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
实在没有代理，则可以采用小曲的存储桶下载地址：
curl -o- https://pic.dataeast.cn/picture/install_nvm_0.35.9.sh | bash
现在完成之后会出现这样的显示

然后在终端中运行以下命令以加载 nvm：

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

执行完成之后即可使用nvm

安装node 长期支持的版本 v20.17.0 nvm install 20.17.0 , 完成安装之后可以看到切换之后的node版本，未来我们将使用这个版本进行nextjs的开发

文档不完整？及时更新内容查看下方地址

独立博客 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” 微信公众号