跳到內容

開始使用 Next.js 進行建置

從初學者到專家，透過學習 Next.js 的基礎知識，並建置一個使用所有最新功能的完整示範網站。

學習 Next.js

學習 Next.js

共 16 個章節，帶您從 React 邁向 Next.js。

佔位符

React 基礎

React 新手嗎？學習基礎概念，幫助您從 JavaScript 進階到 React。

Next.js Pages Router（頁面路由器）

學習如何使用 Pages Router 建置靜態部落格。

本課程如何運作？

透過建置完整的 Web 應用程式。逐步教學。
Course explainer

設定您的本機環境並初始化「ACME」Next.js 專案範本。

在每個章節中使用預先設計樣式的元件，這些元件充分利用 Next.js 的慣例和模式。

串接真實的應用程式邏輯和資料，讓功能完善的示範網站栩栩如生。

在課程結束時，您將擁有一個隨時可以發布的網站，以及建置和部署您自己網站的知識。

您的進度會在您完成章節時同步

按照自己的步調學習，並從上次中斷的地方繼續

在每個章節中測試您的知識

參加快速測驗來檢視您的學習成果

我將學到什麼？

以下是本課程涵蓋的所有內容。

簡介

透過免費的 Next.js 基礎課程，學習如何建置全端 Web 應用程式。
1

開始使用

使用儀表板入門範例建立新的 Next.js 應用程式，並探索專案。
2

CSS 樣式

使用 Tailwind 和 CSS modules 為您的 Next.js 應用程式設定樣式。
3

最佳化字體和圖片

使用 Next.js 內建元件最佳化字體和圖片。
4

建立版面配置和頁面

建立儀表板路由和可在多個頁面之間共用的共用版面配置。
5

頁面間導覽

學習如何使用 <Link> 元件在頁面之間導覽。
6

設定您的資料庫

為您的應用程式設定資料庫，並使用初始資料進行填充。
7

提取資料

了解 Next.js 中提取資料的不同方式，並使用伺服器元件為您的儀表板頁面提取資料。
8

靜態和動態渲染

了解 Next.js 中的渲染運作方式，並讓您的儀表板應用程式動態化。
9

串流

透過串流和載入骨架畫面改善應用程式的載入體驗。
10

部分預先渲染

初步了解部分預先渲染及其運作方式。
11

新增搜尋和分頁

使用 Next.js API 將搜尋和分頁功能新增至您的儀表板應用程式。
12

變更資料

使用 React 伺服器動作變更資料，並重新驗證 Next.js 快取。
13

處理錯誤

使用 error.tsx 和 notFound 優雅地處理錯誤。
14

改善無障礙功能

實作伺服器端表單驗證，並改善表單的無障礙功能。
15

新增身分驗證

使用 NextAuth.js、伺服器動作和中介軟體新增身分驗證，以保護您的儀表板路由。
16

新增 Metadata（metadata）

學習如何將 metadata 新增至您的 Next.js 應用程式。
17

後續步驟

Next.js 儀表板課程結論
佔位符

想更深入了解嗎？

使用我們的指南繼續學習。

檢視所有指南

如何使用 Next.js、Prisma 和 Postgres 建置全端應用程式

建置、部署和 Git

使用 Next.js 和自訂網域建置多租戶應用程式

建置、部署和 Git

整合 Next.js 和 Contentful 以用於無頭 CMS

資料庫和 CMS

使用 Next.js 和 Shopify 建置電子商務網站

資料庫和 CMS

將無頭 WordPress 與 Next.js 和 Vercel 搭配使用

資料庫和 CMS

Next.js 文件

安裝、執行、使用和部署 Next.js 的完整資源

檢視文件