制作您的第一個(gè)下一個(gè).js網(wǎng)站

　　介紹

　　我們都知道，今天每個(gè)企業(yè)和公司都需要一個(gè)快速的網(wǎng)站。每個(gè)人都需要一個(gè)運(yùn)行速度快，渲染速度快的網(wǎng)站(圖像或文本渲染速度快)，并且沒有太多的加載時(shí)間。這些參數(shù)對(duì)于搜索引擎最為重要。但不要擔(dān)心，Next.js隨時(shí)準(zhǔn)備幫助我們!

　　接下來.js獨(dú)自處理這些事情。它提供了許多驚人的功能和優(yōu)化，幫助我們快速制作網(wǎng)站。它提供靜態(tài)和服務(wù)器端呈現(xiàn)，頁面之間簡(jiǎn)單快速的路由，快速的圖像呈現(xiàn)等等。在本文中，我們將創(chuàng)建我們的第一個(gè)下一個(gè).js網(wǎng)站。我們將介紹的一點(diǎn)：

　　下一.js的基本概述和功能。

　　安裝并設(shè)置我們的第一個(gè)下一個(gè).js應(yīng)用程序。

　　文件結(jié)構(gòu)概述。

　　啟動(dòng)開發(fā)服務(wù)器。

　　將自定義頁添加到“下一個(gè).js”應(yīng)用程序。

　　因此，讓我們開始本文，不要再拖延時(shí)間!

　　下一個(gè)的概述和功能.js

　　接下來.js是基于 React 的框架。它不是一門不同的語言，它是簡(jiǎn)單的 React。如果你了解 React，你可以很容易地學(xué)習(xí)下一個(gè).js。使用下一.js，您可以非常方便地制作 React Web 應(yīng)用程序。它是前端框架，也是后端框架。您可以將其用于前端，也可以將其用于后端。

　　接下來.js為您提供了許多功能，例如服務(wù)器端渲染，靜態(tài)站點(diǎn)生成，內(nèi)置路由器，SEO工具等。使用這些功能，您可以使您的網(wǎng)站快速?，F(xiàn)在，讓我們安裝第一個(gè)下一個(gè).js應(yīng)用程序!

　　安裝并設(shè)置我們的第一個(gè) 下一個(gè).js應(yīng)用程序

　　在計(jì)算機(jī)上創(chuàng)建一個(gè)新文件夾 — 打開終端并開始運(yùn)行以下命令以安裝 Next.js 應(yīng)用程序!

　　要安裝紗線(您也可以使用npm，但紗線比npm快，所以，這里我們使用紗線)：

　　要?jiǎng)?chuàng)建我們的第一個(gè) Next.js 應(yīng)用程序(您可以在此處提供自己的應(yīng)用程序名稱)，請(qǐng)?jiān)诮K端中運(yùn)行以下命令：

　　文件結(jié)構(gòu)概述

　　安裝 Next 應(yīng)用后，你的文件結(jié)構(gòu)如下所示：

　　下一個(gè).js應(yīng)用程序的文件結(jié)構(gòu)

　　node_modules：它包含節(jié)點(diǎn)項(xiàng)目的所有重要模塊或文件或文件夾

　　頁面：在此文件夾中，您將為導(dǎo)航欄，頁腳等網(wǎng)站創(chuàng)建所有組件或頁面。此外，您還將在此處創(chuàng)建 API。

　　公共：它包含您想要公開的所有文件，因此每個(gè)人都可以訪問您的文件，例如favicon等。

　　樣式：它包含所有 CSS 文件。它可以是全局 CSS 文件，也可以是特定組件的特定 CSS 文件。您可以在此處添加所有樣式或 CSS。

　　.gitignore：如果你想在GitHub上推送這個(gè)項(xiàng)目，如果你不想推送一些文件，那么你可以把這些文件添加到這個(gè)文件夾中。因此，當(dāng)您推送項(xiàng)目時(shí)，文件將不會(huì)推送。

　　包.json：它是任何節(jié)點(diǎn)項(xiàng)目的核心。它采用 JSON 格式，包含有關(guān)項(xiàng)目的所有元數(shù)據(jù)和重要信息。

　　README.md：當(dāng)您在GitHub上發(fā)布項(xiàng)目時(shí)，它會(huì)描述有關(guān)項(xiàng)目的所有信息

　　啟動(dòng)開發(fā)服務(wù)器

　　在啟動(dòng)開發(fā)服務(wù)器之前，請(qǐng)打開 package.json 文件并添加以下腳本：

　　我的包.json

　　現(xiàn)在，您已準(zhǔn)備好啟動(dòng)服務(wù)器。在終端中運(yùn)行此命令

　　(注意：您需要在Next.js為您制作的文件夾中打開終端。例如，在這里，Next.js為我制作了一個(gè)“mysite”文件夾，然后我將打開該文件夾，然后我將運(yùn)行此命令。我希望你能理解!

　　恭喜您，您的第一個(gè)下一頁.js網(wǎng)站已成功啟動(dòng)

　　將自定義頁面添加到下一個(gè).js應(yīng)用程序

　　在 pages 文件夾中創(chuàng)建一個(gè)名為“Home.js”的新組件，并像這樣向其添加自定義頁面和代碼.

　　暫時(shí)刪除文件結(jié)構(gòu)中的索引.js文件，然后編輯_app.js文件

　　最后，你的網(wǎng)站看起來像這樣，

　　恭喜您，您制作了第一個(gè)下一個(gè).js網(wǎng)站!

　　因此，這就是您可以使用Next.js制作自己的網(wǎng)站的方法。我希望你喜歡它。

　　結(jié)論

　　我們學(xué)會(huì)了使用 Next.js 創(chuàng)建一個(gè)網(wǎng)站。我們從頭開始創(chuàng)建了這個(gè)網(wǎng)站。我們安裝 Next.js — 設(shè)置它 — 啟動(dòng)開發(fā)服務(wù)器 — 添加我們的自定義組件以及更多內(nèi)容。我們涵蓋了：

　　下一.js的基本概述和功能。

　　安裝并設(shè)置我們的第一個(gè)下一個(gè).js應(yīng)用程序。

　　文件結(jié)構(gòu)概述。

　　啟動(dòng)開發(fā)服務(wù)器。

　　將自定義頁添加到“下一個(gè).js”應(yīng)用程序。