我們都聽說(shuō)過(guò) NextJs——最流行和最靈活的 ReactJS 框架，可以簡(jiǎn)化您的生產(chǎn)開發(fā)。它具有以下優(yōu)點(diǎn)，有助于更快地創(chuàng)建 Web 應(yīng)用程序：

• 混合靜態(tài)和 SSR

• 支持打字稿

• 智能樓宇

• 路由預(yù)取

• 無(wú)需配置

Next.js 為我們提供了哪些功能？

這些是 Next.js 為我們提供的功能。

• 服務(wù)器端渲染

• 自動(dòng)代碼拆分

• 靜態(tài)導(dǎo)出選項(xiàng)

• 簡(jiǎn)單的生產(chǎn)構(gòu)建

NextJS 教程目標(biāo)

在今天的NextJS 教程中，我們將介紹以下內(nèi)容：

• 創(chuàng)建 NextJS 應(yīng)用程序

• 頁(yè)面和基本路由

創(chuàng)建一個(gè) NextJs 應(yīng)用程序

# 使用 npx 創(chuàng)建一個(gè)新的 Next.js 應(yīng)用程序npx create-next-app <app-name># 使用 npm 創(chuàng)建一個(gè)新的 Next.js 應(yīng)用程序npm create-next-app <app-name># 帶紗線yarn create next-app <應(yīng)用名稱>

在這里，我們使用 yarn 命令來(lái)創(chuàng)建我們的 NextJS 應(yīng)用程序。按照以下命令操作。

紗線創(chuàng)建下一個(gè)應(yīng)用程序下一個(gè)項(xiàng)目演示/**
 * 項(xiàng)目名稱：下一個(gè)項(xiàng)目演示*/

完成命令后，下面將是成功響應(yīng)。

我們的整個(gè)項(xiàng)目都存儲(chǔ)在next-project-demo中。文件夾結(jié)構(gòu)請(qǐng)參考下圖。

空置率由您決定。

Next.js 用于 10,000 多個(gè)面向生產(chǎn)的網(wǎng)站和 Web 應(yīng)用程序，其中包括許多世界上最大的品牌。需要幫助來(lái)加速您的產(chǎn)品開發(fā)？

下載

文件夾結(jié)構(gòu)

運(yùn)行 NextJS 應(yīng)用程序

使用以下命令運(yùn)行我們的應(yīng)用程序只是為了測(cè)試它。

cd next-project-demo // 切換文件夾yarn dev //運(yùn)行next.js項(xiàng)目

您的瀏覽器看起來(lái)像這樣。

http://localhost:3000/

然后頁(yè)面看起來(lái)像這樣

頁(yè)面和路由設(shè)置

轉(zhuǎn)到NextJs 教程的主要部分。在 Next.js 中，我們可以使用其基于文件的路由來(lái)創(chuàng)建多頁(yè)面應(yīng)用程序。最好的部分是，不需要安裝額外的包或像 react-router-dom 這樣的第三方庫(kù)，甚至根本不需要配置路由器。

所有 Next.js 應(yīng)用程序都包含默認(rèn)的 /pages 目錄：應(yīng)用程序的 React 組件的主目錄。路由器將根據(jù)組件提供頁(yè)面。

/頁(yè)面目錄

主頁(yè)

打開索引頁(yè)并從該文件中刪除所有代碼，然后使用以下代碼配置主頁(yè)。

函數(shù)主頁(yè)（）{
  返回（<分區(qū)>
    <h1>這是我們的主頁(yè)</h1>
  </div>)}導(dǎo)出默認(rèn)主頁(yè)；

運(yùn)行應(yīng)用

關(guān)于頁(yè)面

現(xiàn)在，如果我們想添加另一個(gè)頁(yè)面，那么我們將創(chuàng)建一個(gè)文件和頁(yè)面文件夾，并執(zhí)行與我們?yōu)橹黜?yè)所做的相同的操作。

假設(shè)我們要?jiǎng)?chuàng)建一個(gè)關(guān)于頁(yè)面，只需在頁(yè)面目錄下添加 about.js 文件即可。使用下面的代碼。

功能關(guān)于頁(yè)面（）{
    返回（<分區(qū)>
        <h1>這是關(guān)于頁(yè)面</h1>
    </div>)}導(dǎo)出默認(rèn)的關(guān)于頁(yè)面；

現(xiàn)在在瀏覽器中運(yùn)行應(yīng)用程序，如果我們?cè)诼酚芍刑岬?about，那么應(yīng)用程序?qū)⒓虞d關(guān)于頁(yè)面。

初學(xué)者的 NextJs 教程就是這樣。在下一個(gè)指南中，我們將討論更多基于文件的路由和與多個(gè)頁(yè)面的鏈接。

結(jié)論

（言鼎科技）專做軟件開發(fā),微信小程序,網(wǎng)站開發(fā),軟件外包,手機(jī)APP開發(fā)，歡迎資訊！