软件介绍
Next.js是一个用于在服务端渲染React应用程序的简单框架,Next.js 8为移动应用程序新增了无服务器功能。
支持的操作系统
经过华为云严格实测,以下操作系统在鲲鹏生态中可以完整运行Nex.js的全部功能:
l CentOS 7.5
l EulerOS 2.8
支持版本和获取方式
l 建议使用版本为“next-9.0.1”
l 通过npm命令获取安装
编译和测试方式
1. 选择操作环境
本文选用华为鲲鹏云服务ECS KC1实例做测试,详细配置如下:
类别 | 子项 | 版本 |
云服务器配置 | ECS实例类型 | kc1.xlarge.4 |
ECS配置 | 4U16GB | |
EVS | 高IO(40GB) | |
云OS | CentOS | 7.5 |
Kernel | 4.14.0-49 |
2. 配置安装工具
Next.js需要使用npm命令安装,因此先安装node.js,步骤如下:
1) 获取Node.js软件包。
wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-arm64.tar.xz
2) 解压软件包。
tar -xvf node-v10.16.0-linux-arm64.tar.xz
3) 为node及npm建立软链接,方便在任意目录下执行node及npm命令。
ln -s /root/nextJS/node-v10.16.0-linux-arm64/bin/node /usr/bin/node
ln -s /root/nextJS/node-v10.16.0-linux-arm64/bin/npm /usr/bin/npm
3. 安装搭建next.js项目
1) 创建项目目录并进入该目录。
mkdir test && cd test
2) 初始化“package.json”文件。
npm init -y
3) 安装项目依赖包。
npm install --save react react-dom next
4) 在当前目录创建一个“pages”文件夹。
“pages”为Next.js默认访问文件夹的名称
mkdir pages
5) 修改“package.json”文件。
修改后的内容如下:
.....
{
"scripts": { "dev": "next",
"build": "next build",
"start": "next start"
}
......
4. 测试已完成搭建的项目
1) 启动Next.js。
npm run dev
回显内容如下:
[ wait ] compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000
2) 访问Web服务。
在浏览器地址栏输入“http://ECS IP:3000/”访问。
3000为默认端口。
浏览器返回404错误,这是由于项目中没有添加任何页面造成的。
3) 在“pages”目录下创建“index.js”文件,并添加如下内容。
const Index = () => (
<div>
<p>Hello, welcome to next.js!</p>
</div>
)
export default Index
添加完成后,浏览器自动刷新并显示:
Hello, welcome to next.js!