文档首页 > > 移植指南> 安装Next.js

安装Next.js

分享
更新时间:2020/08/31 GMT+08:00

介绍

简要介绍

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

语言:JS/TS

一句话描述:Next.js是一个渲染应用程序的框架

建议的版本

建议使用版本为“next-9.0.1”

环境要求

云服务器要求

本文以云服务器KC1实例测试,云服务器配置如表1所示。

表1 云服务器配置

项目

说明

规格

kc1.xlarge.2 | 4vCPUs | 8GB

磁盘

系统盘:高IO(40GB)

操作系统要求

操作系统要求如表2所示。

表2 操作系统要求

项目

版本

下载地址

CentOS

7.5

在公共镜像中已提供。

Kernel

4.14.0

在公共镜像中已提供。

配置安装环境

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

安装

  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"
    }
    ......

运行和验证

  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!

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问