开发目标
我们将构建一个简化版本的财务仪表板，其内容包括：
公共主页、登录页面、受身份验证保护的仪表板页面、用户可以添加、编辑和删除发票
开发环境配置
开发客户端 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 [email protected] -A
命令 ssh [email protected] -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的开发
别走开，nextjs小白从0到1手把手教学正在更新当中，敬请期待
探索这份全面的 Next.js 零基础教程，从基础概念到高级技巧，手把手带您掌握 Next.js 开发。包含实战项目、性能优化和最佳实践，助您快速成为 Next.js 专家。2024年最新更新，与时俱进！
更详细内容查看
独立博客 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” 微信公众号
