搬瓦工VPS安装Next.js Web应用程序（基于Ubuntu 20.10系统）

一、安装NodeJS和NPM

1、安装curl.

$ sudo apt-get install curl

2、添加最新的稳定版本的NodeJS。

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

3、安装NodeJS

$ sudo apt-get install nodejs

4、验证安装。

$ node -v $ npm -v

二、设置

1、更改到首选的项目根文件夹。

$ cd /path/to/desired/folder/

2、使用npx CLI构建工具初始化Next.js项目开发环境。将my-project替换为所有小写的项目名称。

$ npx create-next-app my-project

3、更改到项目目录，列出目录内容。

$ cd my-project$ ls

4、项目的文件结构应该类似于以下(不包括node_modules和package-lock.json):

path/to/project/
├── package.json
├── pages
├── public
├── README.md
└── styles

5、启动开发服务器。

$ npm run dev

6、控制台报告后:

ready - started server on http://localhost:3000

在web浏览器中导航到端口3000上的服务器IP。

http://192.0.2.123:3000/

三、验证网页说欢迎来到Next.js!

要为你的项目创建一个优化的生产版本，用CTRL + C关闭开发服务器，然后运行:

$ npm run build && npm run start

命令完成后，web服务器开始为您的web应用程序提供服务。导航到端口3000上的服务器IP，并查看生产版本。这次它的加载速度应该会快得多。

四、静态文件的自定义服务器

要使用服务器如Nginx或Apache来存放文件，导出项目的静态构建。你的项目可能会失去一些功能，因为像API路由这样的特性对于静态站点是不可用的。要使用服务器并保存这些动态函数，请参考Next.js自定义服务器API。

要使用自己的服务器，请编辑软件包。json文件在项目的根目录。在scripts对象下添加另一个脚本，键为export，值为next export。你的修改方案。json应该是这样的:

{    "name": "my-project",    "version": "0.1.0",    "private": true,    "scripts": {        "dev": "next dev",        "build": "next build",        "start": "next start",        "export": "next export"    },    "dependencies": {        "next": "10.0.3",        "react": "17.0.1",        "react-dom": "17.0.1"    }}

在编辑package.json文件后，运行以下命令生成web应用的静态构建:

$ npm run build && npm run export

在项目目录中查找命名为out的文件夹，其中包含导出的项目。使用此文件夹直接为静态web应用程序提供您选择的服务器。

搬瓦工新手必读教程和推荐套餐

搬瓦工新手选择服务器必备的教程。

1、搬瓦工购买教程：搬瓦工VPS主机购买教程 选择一款合适的外贸主机

2、搬瓦工优惠码：BWH3HYATVBJW

3、搬瓦工套餐推荐：搬瓦工云服务器全部套餐对比列表 可选CN2 GIA和香港机房

4、搬瓦工测试IP：搬瓦工全部数据中心测试IP地址和下载测速文件

5、搬瓦工面板管理：搬瓦工KIWIVM面板的全部功能介绍

搬瓦工VPS的最便宜套餐和最具性价比套餐，简单整理如下：

本文结束。