简介

Next.js是一个用于在服务端渲染React应用程序的简单框架，Next.js 8为移动应用程序新增了无服务器功能。

配置安装方式

1.选择操作环境

本文选用华为鲲鹏 云服务 ECS KC1实例做测试

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!