Next.js
渲染应用程序的框架
开发语言:JS/TS

软件介绍

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)     nodenpm建立软链接,方便在任意目录下执行nodenpm命令。

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!