制作您的第一個下一個.js網站

　　介紹

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

　　接下來.js獨自處理這些事情。它提供了許多驚人的功能和優化，幫助我們快速制作網站。它提供靜態和服務器端呈現，頁面之間簡單快速的路由，快速的圖像呈現等等。在本文中，我們將創建我們的第一個下一個.js網站。我們將介紹的一點：

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

　　安裝并設置我們的第一個下一個.js應用程序。

　　文件結構概述。

　　啟動開發服務器。

　　將自定義頁添加到“下一個.js”應用程序。

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

　　下一個的概述和功能.js

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

　　接下來.js為您提供了許多功能，例如服務器端渲染，靜態站點生成，內置路由器，SEO工具等。使用這些功能，您可以使您的網站快速?，F在，讓我們安裝第一個下一個.js應用程序!

　　安裝并設置我們的第一個 下一個.js應用程序

　　在計算機上創建一個新文件夾 — 打開終端并開始運行以下命令以安裝 Next.js 應用程序!

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

　　要創建我們的第一個 Next.js 應用程序(您可以在此處提供自己的應用程序名稱)，請在終端中運行以下命令：

　　文件結構概述

　　安裝 Next 應用后，你的文件結構如下所示：

　　下一個.js應用程序的文件結構

　　node_modules：它包含節點項目的所有重要模塊或文件或文件夾

　　頁面：在此文件夾中，您將為導航欄，頁腳等網站創建所有組件或頁面。此外，您還將在此處創建 API。

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

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

　　.gitignore：如果你想在GitHub上推送這個項目，如果你不想推送一些文件，那么你可以把這些文件添加到這個文件夾中。因此，當您推送項目時，文件將不會推送。

　　包.json：它是任何節點項目的核心。它采用 JSON 格式，包含有關項目的所有元數據和重要信息。

　　README.md：當您在GitHub上發布項目時，它會描述有關項目的所有信息

　　啟動開發服務器

　　在啟動開發服務器之前，請打開 package.json 文件并添加以下腳本：

　　我的包.json

　　現在，您已準備好啟動服務器。在終端中運行此命令

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

　　恭喜您，您的第一個下一頁.js網站已成功啟動

　　將自定義頁面添加到下一個.js應用程序

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

　　暫時刪除文件結構中的索引.js文件，然后編輯_app.js文件

　　最后，你的網站看起來像這樣，

　　恭喜您，您制作了第一個下一個.js網站!

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

　　結論

　　我們學會了使用 Next.js 創建一個網站。我們從頭開始創建了這個網站。我們安裝 Next.js — 設置它 — 啟動開發服務器 — 添加我們的自定義組件以及更多內容。我們涵蓋了：

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

　　安裝并設置我們的第一個下一個.js應用程序。

　　文件結構概述。

　　啟動開發服務器。

　　將自定義頁添加到“下一個.js”應用程序。