跳到內容

開始使用 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 模組為你的 Next.js 應用程式新增樣式。
3

最佳化字型和影像

使用 Next.js 內建元件最佳化字型和影像。
4

建立佈局和頁面

建立儀表板路由和可在多個頁面之間共享的共享佈局。
5

頁面間導航

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

設定資料庫

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

資料獲取

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

靜態渲染和動態渲染

瞭解 Next.js 中的渲染工作原理，並使你的儀表板應用程式動態化。
9

流式傳輸

透過流式傳輸和載入骨架提高應用程式的載入體驗。
10

部分預渲染

初步瞭解部分預渲染及其工作原理。
11

新增搜尋和分頁

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

變異資料

使用 React Server Actions 變異資料，並重新驗證 Next.js 快取。
13

錯誤處理

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

提高可訪問性

實現伺服器端表單驗證並提高表單的可訪問性。
15

新增認證

新增認證以使用 NextAuth.js、Server Actions 和中介軟體保護你的儀表板路由。
16

新增元資料

學習如何為你的 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 的完整資源

檢視文件