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

Next.js是一个基于React的Javascript框架,它允许开发人员创建服务器端渲染和静态生成的React应用程序

Nextjs

一、安装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的最便宜套餐和最具性价比套餐,简单整理如下:

方案CPU内存硬盘流量带宽机房价格购买
CN2 GT1核1GB20GB1TB1GbpsDC8等$49.99/年购买
香港2核2GB40GB500GB1Gbps香港$89.99/月购买
CN2 GIA2核1GB20GB1TB2.5GbpsDC6等$49.99/季购买
CN2 GIA10核32GB640GB10TB10GbpsDC6等$289.99/月购买
日本2核1GB20GB1TB2.5GbpsDC6等$49.99/季购买

本文结束。

未经允许不得转载:搬瓦工评测网 » 搬瓦工VPS安装Next.js Web应用程序(基于Ubuntu 20.10系统)