Next.js - 概述 - 程式設計

首頁 > 程式設計 > Next.js - 概述

Next.js - 概述

發佈於2024-11-02

本文作為初學者友好的指南和使用 Next.js 的步驟。

Next.js 是一個用於建立 Web 應用程式的靈活框架。相反，它是一個建立在 Node.js 之上的 React 框架。

設定您的 Next.js 專案
要啟動新的 Next.js 項目，您需要在電腦上安裝 Node.js。

安裝
安裝時，打開終端機並執行以下命令來建立新的 Next.js 專案： npx create-next-app@latest my-nextjs-app
Next.js 提供了一個已經寫好的程式碼，反映了現實世界的開發，以便熟悉現有的程式碼庫。
安裝完成後，導航至專案目錄並運行開發伺服器：
cd my-nextjs-app
npm 運行開發

資料夾結構
典型的 Next.js 專案結構由幾個關鍵資料夾組成：

page/：此資料夾包含定義應用程式路由的檔案。該資料夾中的每個檔案對應一條路線。
public/：您可以在此處儲存圖像、字體和圖示等靜態資源。此處的文件可透過 URL 存取。
styles/：此資料夾保存全域和特定於元件的樣式。預設情況下，它包含一個全域 CSS 檔案。
components/：可重複使用的 React 元件。
api/：API路由，用於伺服器端功能（選用）。

Nextjs 是首選框架，因為它提供了各種內建功能，例如：

自動程式碼分割以加快頁面載入速度。 - Next.js 會自動執行程式碼分割，因此每個頁面僅載入該頁面所需的內容。這意味著最初不會提供其他頁面的程式碼。
具有最佳化預取的客戶端路由。
- 它將路由建立為頁面下的文件，並使用內建的 Link 元件連結到它們。不需要路由庫。
- 每當瀏覽器視窗中出現連結元件（標籤的 Next.js 版本）時，Next.js 就會自動在背景預取連結頁面的程式碼。因此，當使用者點擊連結時，目標頁面的程式碼將已在後台加載，並且頁面轉換將幾乎是即時的。
直覺的基於頁面的路由系統（支援動態路由）
預先渲染，每頁支援靜態產生（SSG）和伺服器端渲染（SSR）。 - 提前為每個頁面產生 HTML，而不是由客戶端 JavaScript 完成。
如果我們不需要預先渲染數據，我們也可以使用稱為客戶端渲染的策略，其中：
1. 靜態產生（預先渲染）不需要外部資料的頁面部分。
2. 頁面載入時，使用 JavaScript 從客戶端取得外部資料並填入其餘部分。
內建 CSS 和 Sass 支援適用於任何 CSS-in-JS 函式庫。
支援快速刷新的開發環境。
使用無伺服器函數建立 API 端點的 API 路由
Next.js 支援 API 路由，這讓我們可以輕鬆建立 API 端點作為 Node.js 無伺服器函數。我們可以透過在pages/api目錄中建立一個函數來做到這一點。
完全可擴展。