Next.js 教程

Table of content

Next.js 是一個基於 React 的框架，具有伺服器端渲染功能，可以建立全棧 Web 應用。要建立使用者介面，您可以使用 React，但 Next.js 可以提供額外的功能和自定義。

為什麼要使用 Next.js？

Next.js 能夠配置 React 應用中所需的工具，因此您可以提高生產力，專注於開發而不是配置。Next.js 解決了常見的應用需求，例如路由、資料獲取、快取，並改善了開發體驗。

Next.js 的發明是為了減少 Web 瀏覽器的負載並提供增強的安全性。它還有一些其他特性，如下所示。

特性	描述
路由	Next.js 使用基於檔案系統的路由器。每當我們在 pages 目錄中新增任何頁面時，它都會透過 URL 自動可用。
渲染	Next.js 渲染支援雙端渲染（客戶端和伺服器端），使用者的瀏覽器和伺服器。因此，透過預構建一些頁面並根據需要建立其他頁面，可以使其更快。
資料獲取	伺服器元件現在可以使用 async/await 更輕鬆地獲取資料，並透過改進的 fetch API 提供更好的方法來儲存、快取和更新資料。
樣式	Next.js 支援內建的 css-in-js 庫，名為 styled-jsx。它允許在 React 元件中編寫 CSS，並且這些樣式將限定在元件範圍內。
最佳化	最佳化影像、字型、指令碼將有助於您的應用獲得更好的效能並改善 Web 應用的 SEO。
TypeScript	Next.js 支援 TypeScript，因此與 JavaScript 相比，它具有更好的型別檢查和更有效的編譯。

在繼續本教程之前，您應該對JavaScript 和React.js 有基本的瞭解。

要開始使用 Next.js，您可以從以下主題開始。本教程將幫助您按照自己的節奏學習 Next.js，為了充分利用本教程，我們建議您在每個課程中進行編碼練習。

在深入學習任何教程之前，始終要做好基礎準備。

Next.js 支援內建的 css-in-js 庫，名為 styled-jsx。

Next.js 根據您組織檔案的方式自動建立網站連結。如果您在 pages 資料夾中新增一個新檔案，它將成為您網站上的一個新頁面。

API 路由是使用 Next.js 建立 REST API 的一種方式。它可以對映 /pages/api 資料夾中存在的任何檔案，並將被視為 API 端點。

關於 Next.js 有些非常常見的問題 (FAQ)

Next.js 是一個用於構建全棧 Web 應用的 React 框架。

Next.js 比 React 更具主張性，但靈活性不如 React。使用 Next.js 配置 React 應用中所需的工具。

它可以用於兩者，但建議用作前端。

否，兩者不同 - Next.js 是基於 React 的框架，而 Node.js 是 JavaScript 執行時環境。

列印頁面