久久久精品成人无遮挡,五月丁香中文字幕

華為云計算云知識 Next.js如何配置

Next.js如何配置

時間: 2020-11-16 11:50:56

猜你想看：

實(shí)時語音識別云服務(wù)器配置 CDN是什么意思視頻點(diǎn)播加速什么是云桌面

簡介

Next.js是一個用于在服務(wù)端渲染React應(yīng)用程序的簡單框架，Next.js 8為移動應(yīng)用程序新增了無服務(wù)器功能。

1.選擇操作環(huán)境

本文選用華為鯤鵬云服務(wù)ECS KC1實(shí)例做測試

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建立軟鏈接，方便在任意目錄下執(zhí)行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項(xiàng)目

1)創(chuàng)建項(xiàng)目目錄并進(jìn)入該目錄。

mkdir test && cd test

2)初始化“package.json”文件。

npm init -y

3)安裝項(xiàng)目依賴包。

npm install --save react react-dom next

4)在當(dāng)前目錄創(chuàng)建一個“pages”文件夾。

“pages”為Next.js默認(rèn)訪問文件夾的名稱

mkdir pages

5)修改“package.json”文件。

修改后的內(nèi)容如下：

.....

{

"scripts": {   "dev": "next",

     "build": "next build",

"start": "next start"

}

......

4. 測試已完成搭建的項(xiàng)目

1)啟動Next.js。

npm run dev

回顯內(nèi)容如下：

[ wait ]  compiling ...

[ ready ] compiled successfully - ready on http://localhost:3000

2)訪問Web服務(wù)。

在瀏覽器地址欄輸入“http://ECS IP:3000/”訪問。

3000為默認(rèn)端口。

瀏覽器返回404錯誤，這是由于項(xiàng)目中沒有添加任何頁面造成的。

3)在“pages”目錄下創(chuàng)建“index.js”文件，并添加如下內(nèi)容。

const Index = () => (

<div>

<p>Hello, welcome to next.js!</p>

</div>

)

export default Index

添加完成后，瀏覽器自動刷新并顯示：

Hello, welcome to next.js!