跳至內容

開始使用 Next.js 建構

透過學習 Next.js 的基礎知識並建構一個使用所有最新功能的完整功能演示網站，從新手晉升為專家。

學習 Next.js

學習 Next.js

16 個章節，帶您從 React 進入 Next.js 的世界。

佔位符

學習 React 基礎

不熟悉 React 嗎？透過這個基礎課程學習如何從 JavaScript 進入 React。

React 基礎

課程如何運作？

透過建構一個完整的網路應用程式。一步一步地進行。
Course explainer

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

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

連接真實的應用程式邏輯和資料，使一個功能齊全的演示網站栩栩如生。

最後，您將擁有一個準備發佈的網站，以及建構和部署您自己網站的知識。

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

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

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

參加快速測驗，看看您學到了什麼

我會學到什麼？

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

簡介

學習如何使用免費的 Next.js App Router 課程建構全端網路應用程式。
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 伺服器動作變更資料，並重新驗證 Next.js 快取。
13

處理錯誤

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

提升無障礙性

在您的表單中實作伺服器端表單驗證並提升無障礙性。
15

新增驗證

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

新增詮釋資料

了解如何在您的 Next.js 應用程式中新增詮釋資料。
17

後續步驟

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

想深入了解嗎？

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

...查看所有指南

How to build a fullstack app with Next.js, Prisma and Postgres

Build, Deployment & Git

Build a multi-tenant app with custom domains using Next.js

Build, Deployment & Git

Integrating Next.js and Contentful for your headless CMS

Databases & CMS

Building Ecommerce Sites with Next.js and Shopify

Databases & CMS

Using headless WordPress with Next.js and Vercel

Databases & CMS

Next.js 文件

安裝、運行、構建和部署 Next.js 的完整資源。

...查看文件