制作您的第一個下一個.js網(wǎng)站
介紹
我們都知道,今天每個企業(yè)和公司都需要一個快速的網(wǎng)站。每個人都需要一個運行速度快,渲染速度快的網(wǎng)站(圖像或文本渲染速度快),并且沒有太多的加載時間。這些參數(shù)對于搜索引擎最為重要。但不要擔(dān)心,Next.js隨時準(zhǔn)備幫助我們!
接下來.js獨自處理這些事情。它提供了許多驚人的功能和優(yōu)化,幫助我們快速制作網(wǎng)站。它提供靜態(tài)和服務(wù)器端呈現(xiàn),頁面之間簡單快速的路由,快速的圖像呈現(xiàn)等等。在本文中,我們將創(chuàng)建我們的第一個下一個.js網(wǎng)站。我們將介紹的一點:
下一.js的基本概述和功能。
安裝并設(shè)置我們的第一個下一個.js應(yīng)用程序。
文件結(jié)構(gòu)概述。
啟動開發(fā)服務(wù)器。
將自定義頁添加到“下一個.js”應(yīng)用程序。
因此,讓我們開始本文,不要再拖延時間!
下一個的概述和功能.js
接下來.js是基于 React 的框架。它不是一門不同的語言,它是簡單的 React。如果你了解 React,你可以很容易地學(xué)習(xí)下一個.js。使用下一.js,您可以非常方便地制作 React Web 應(yīng)用程序。它是前端框架,也是后端框架。您可以將其用于前端,也可以將其用于后端。
接下來.js為您提供了許多功能,例如服務(wù)器端渲染,靜態(tài)站點生成,內(nèi)置路由器,SEO工具等。使用這些功能,您可以使您的網(wǎng)站快速?,F(xiàn)在,讓我們安裝第一個下一個.js應(yīng)用程序!
安裝并設(shè)置我們的第一個 下一個.js應(yīng)用程序
在計算機上創(chuàng)建一個新文件夾 — 打開終端并開始運行以下命令以安裝 Next.js 應(yīng)用程序!
要安裝紗線(您也可以使用npm,但紗線比npm快,所以,這里我們使用紗線):
要創(chuàng)建我們的第一個 Next.js 應(yīng)用程序(您可以在此處提供自己的應(yīng)用程序名稱),請在終端中運行以下命令:
文件結(jié)構(gòu)概述
安裝 Next 應(yīng)用后,你的文件結(jié)構(gòu)如下所示:
下一個.js應(yīng)用程序的文件結(jié)構(gòu)
node_modules:它包含節(jié)點項目的所有重要模塊或文件或文件夾
頁面:在此文件夾中,您將為導(dǎo)航欄,頁腳等網(wǎng)站創(chuàng)建所有組件或頁面。此外,您還將在此處創(chuàng)建 API。
公共:它包含您想要公開的所有文件,因此每個人都可以訪問您的文件,例如favicon等。
樣式:它包含所有 CSS 文件。它可以是全局 CSS 文件,也可以是特定組件的特定 CSS 文件。您可以在此處添加所有樣式或 CSS。
.gitignore:如果你想在GitHub上推送這個項目,如果你不想推送一些文件,那么你可以把這些文件添加到這個文件夾中。因此,當(dāng)您推送項目時,文件將不會推送。
包.json:它是任何節(jié)點項目的核心。它采用 JSON 格式,包含有關(guān)項目的所有元數(shù)據(jù)和重要信息。
README.md:當(dāng)您在GitHub上發(fā)布項目時,它會描述有關(guān)項目的所有信息
啟動開發(fā)服務(wù)器
在啟動開發(fā)服務(wù)器之前,請打開 package.json 文件并添加以下腳本:
我的包.json
現(xiàn)在,您已準(zhǔn)備好啟動服務(wù)器。在終端中運行此命令
(注意:您需要在Next.js為您制作的文件夾中打開終端。例如,在這里,Next.js為我制作了一個“mysite”文件夾,然后我將打開該文件夾,然后我將運行此命令。我希望你能理解!
恭喜您,您的第一個下一頁.js網(wǎng)站已成功啟動
將自定義頁面添加到下一個.js應(yīng)用程序
在 pages 文件夾中創(chuàng)建一個名為“Home.js”的新組件,并像這樣向其添加自定義頁面和代碼.
暫時刪除文件結(jié)構(gòu)中的索引.js文件,然后編輯_app.js文件
最后,你的網(wǎng)站看起來像這樣,
恭喜您,您制作了第一個下一個.js網(wǎng)站!
因此,這就是您可以使用Next.js制作自己的網(wǎng)站的方法。我希望你喜歡它。
結(jié)論
我們學(xué)會了使用 Next.js 創(chuàng)建一個網(wǎng)站。我們從頭開始創(chuàng)建了這個網(wǎng)站。我們安裝 Next.js — 設(shè)置它 — 啟動開發(fā)服務(wù)器 — 添加我們的自定義組件以及更多內(nèi)容。我們涵蓋了:
下一.js的基本概述和功能。
安裝并設(shè)置我們的第一個下一個.js應(yīng)用程序。
文件結(jié)構(gòu)概述。
啟動開發(fā)服務(wù)器。
將自定義頁添加到“下一個.js”應(yīng)用程序。