2023 年完整 Next.js 開發訓練：從零到精通

Contents

掌握 NextJS 並建構企業級全端 ReactJS 應用程式。由行業專家授課，採用現代最佳實踐！

從這 36.5 小時的課程，你會學到

建構真正的企業級 NextJS 應用程式並部署到生產環境
學習像資深開發人員一樣建構反應性、高性能、大規模的應用程式
了解 NextJS 生態系統中的最新功能和工具，包括 SWR（React Hooks）、Hasura、Serverless Functions、Vercel、Framer Motion 等
學習不同的渲染技術：靜態站點生成、伺服器端渲染、增量靜態再生、水化等…
使用 GraphQL 作為 NextJS 開發人員
成為前 10% 的 NextJS 開發者
設置身份驗證和用戶帳戶（包括無密碼登錄！）
使用 Airtable（它正爆炸式般地流行）建構全端應用程式
了解 SEO 以及如何使用 NextJS 讓你的應用程式在 Google 上排名
從零開始掌握 NextJS 開發者的最新生態系統
通過做出良好的架構決策並幫助團隊中的其他人來學習領導 Next JS 專案
使用最新的 ES6/ES7/ES8/ES9/ES10/ES2020/ES2021 JavaScript 編寫乾淨的程式碼

要求

基本的 HTML、CSS 和 JavaScript 知識
不需要任何 React 或任何其他 JS 框架的經驗！我們甚至提供 React 入門講座作為選項！

課程說明

剛剛發布了 2023 年所有最新的 Next.js 功能！加入擁有超過 900,000 名開發人員的實時線上社區，以及由在矽谷和多倫多實際使用過 Next.js 的行業專家教授的課程。 Ankita 還是所有 Next.js 和 React 會議的定期演講者和講師。

本課程使用最新版本的 Next.js，專注於效率。永遠不需再花時間在令人困惑、過時、不完整的教程上。這裡一定有些什麼，Andrei 的課程的畢業生現在在谷歌、特斯拉、亞馬遜、蘋果、IBM、摩根大通、Facebook 等頂級科技公司工作。

我們向你保證，這是關於 Next.js 和 React 的最全面的在線資源。這個基於專案的課程將向你介紹 2023 年 Next.js 開發人員的所有現代工具鏈。在此過程中，我們將使用 React Hooks、Hasura (GraphQL)、Context API、Airtable、Serverless Functions 建構一個龐大的 Netflix Clone 應用程式、Framer Motion、Vercel 等。這將是一個全端應用程式，不同於你在大多數“簡單”線上課程中看到的應用程式！

當我們引導你從開始到完成發布一個專業的 Next.js 專案，一直到線上運營，課程將非常實用。我們將從一開始就教 Next.js 基礎知識，然後進入進階主題，以便你可以在未來的任何 NextJS 專案的架構和工具上做出正確的決定。

所有程式碼都將逐步提供，即使你不喜歡編寫程式，你也可以訪問完整的主專案程式碼，因此任何註冊該課程的人都將擁有自己的專案並立即放入個人履歷組合。

這是課程將涵蓋的內容：

1 Next.js 基礎知識

比較 Next.js 和 React，並了解 Next.js 提供的好處。你將了解 Next.js 為何如此受歡迎以及 JAM Stack 的一切相關。本節將為你在課程的其餘部分奠定基礎。

2 構建你第一個 Next.js 應用程式 | 咖啡鑑賞家

我們將立即構建第一個專案。第一篇主要講授 Next.js 的基礎知識。本節重點介紹設置專案，教授 css 模組等基礎知識，快速刷新，如何設置專案等…

3 使用 Next.js 進行路由 | 咖啡鑑賞家

你將學習有關路由的所有內容，例如動態路由、索引路由、命名路由、鏈接組件。

4 Next.js 中的樣式| 咖啡鑑賞家

本節將教你如何使用 css 模組、單獨的組件樣式和全局樣式來設置應用程式的樣式。

5 Next.js 中的 Hydration、SEO 和不同的渲染技術

這是課程中最重要的部分之一。本節將教你什麼是 SEO，Next.js 如何幫助 SEO，不同的渲染技術是什麼，例如：靜態站點生成、伺服器端渲染、增量靜態再生（以及它們的不同之處）、客戶端渲染、什麼是水合作用( hydration )。

6 靜態咖啡店頁面 |咖啡鑑賞家

學生將詳細了解靜態渲染以及如何選擇靜態渲染的內容。你將向 Foursquare 發出 API 請求並使用 SSG 呈現這些請求。

7 按地點分類的咖啡店 |咖啡鑑賞家

Next.js 允許你在選擇靜態渲染時使用不同的退回。本節將深入討論這一點，你還將學習如何檢索用戶位置和使用 Context API。

8 無伺服器功能 |咖啡鑑賞家

什麼是無伺服器功能？我們為什麼使用它們以及何時使用它們？你將創建用於檢索靜態咖啡店的無伺服器函數。

9 使用 Airtable 儲存咖啡店 |咖啡鑑賞家

您將了解如何使用 Airtable 進行資料庫儲存。我們將把咖啡店資料儲存在 Airtable 中，並在這裡學習客戶端渲染。

10 帶有客戶端渲染的 SWR |咖啡鑑賞家

什麼是 SWR？什麼時候使用它？我們將使用 Next.js 程式庫進行 SWR，並在本節中使用 SWR 和客戶端渲染。

11 部署和建構優化 |咖啡鑑賞家

將你的應用程式部署到 Vercel 以及 Netlify。你將了解不同的雲提供商是什麼，Vercel 有何不同，什麼是 Lighthouse，以及如何提高我們在 Next.js 中的性能。

12 專案設置 |帶有 Next.js 的 Netflix

這是一個很大的專案！你將開始為最終專案進行設置。本節是關於設置我們的 Netflix 專案。

13 Netflix 主頁和影片 |帶有 Next.js 的 Netflix

你將建構主頁並使用伺服器端渲染。你將學習如何伺服器呈現內容，我們還將調用 YouTube API 來獲取影片列表並顯示在主頁上。卡片組件在 Netflix 中很複雜，因此你還將學習一些成幀器運動來構建卡片組件。

14 魔術認證 |帶有 Next.js 的 Netflix

Auth 在 Next.js 中如何工作？我們將在 Next 中使用無密碼登錄，並使用正確的身份驗證和驗證建構登錄頁面。

15 增量靜態再生 |帶有 Next.js 的 Netflix

在主頁上顯示影片並使用 ISR 將模態建構為頁面。你將了解有關增量靜態生成的更多資訊以建構此模式。

16 Hasura GraphQL |帶有 Next.js 的 Netflix

你將了解什麼是 GraphQL、Hasura，以及 Hasura 架構的外觀。我們將使用 Hasura 環境設置專案。

17 Hasura 認證 |帶有 Next.js 的 Netflix

你將了解身份驗證流程架構的工作原理，並介紹伺服器端 SDK 以使用戶登錄。

18 評分服務和收藏影片頁面 |帶有 Next.js 的 Netflix

你將設置 Hasura 做評分服務，創建評分 API 對影片給予喜歡和不喜歡的評分，並建構我的列表頁面以顯示收藏的 YouTube 影片列表。

19 部署到生產 |帶有 Next.js 的 Netflix

創建最終的 GitHub 貯存庫( repository )，設置貯存庫，最後部署到 Vercel！

20 附錄：React 簡介

對於那些需要 React.js 和 React Hooks 入門的人來說，這是一個可選部分，讓你準備好，充分利用本課程。

我們向你保證，這是 Next.js 上最好的課程。

本課程不是讓你在不了解原理的情況下編寫程式，不會讓你在完成課程後只能去觀看另一個教程，不知道該做什麼。這課程不會這樣！本課程將推動你並挑戰你從 Next.js 的絕對初學者轉變為 Next.js 和 React 開發人員中排名前 10% 的人。我們保證。

課程內見！

目標受眾

有興趣超越普通“初學者”教程的學生
想要學習 Web 開發人員最需要的技能的程式設計師
想要進入 NextJS 開發者前 10% 的開發者
希望獲得在可擴展大型應用程式上工作經驗的學生
想要超越基礎知識的訓練營或線上教程畢業生
想要向真正的行業專家學習的學生，而不僅僅是跟著照本宣科的線上講師

講師簡介

Andrei Neagoie zerotomastery.io 創始人 / 高級軟體開發人員 ( 更多講師主講課程介紹 )

Andrei 是一些線上評價最高的程式設計和技術課程的講師，並且是 ZTM 學院的創始人。

他的畢業生已經進入世界上一些最大的科技公司工作，比如蘋果、谷歌、摩根大通、 IBM 等等。 . 多年來，他一直在矽谷和多倫多擔任高階軟體開發人員，現在正在利用他所學到的一切，來教授程式設計技能，並幫助你發現作為一名開發人員在生活中所能提供的驚人的就業機會。

作為一個自學的程式設計師，他知道有大量的線上課程、教程和書籍過於冗長，不足以教授正確的技能。大多數人在學習一個複雜的主題時會感到麻痺，不知道從哪裡開始，或者更糟糕的是，大多數人沒有20,000美元用於程式設計訓練營。 程式設計技能學習應該是所有人可以負擔的起，並且對所有人開放。教材應該教授現代生活技能，不應該浪費學生寶貴的時間。 Andrei 從為財富500強企業、科技創業公司工作中學到了重要的經驗，甚至開創了自己的事業，他現在 100% 地投入時間教授其他人有價值的軟體開發技能，以便掌控他們的生活，在一個充滿無限可能性且激動人心的行業中工作。

Andrei 向你保證，沒有其它課程有這麼全面和詳細的解釋。他認為，為了學習任何有價值的東西，你需要從基礎開始，發展樹的根本。只有從那裡你才能學到與基礎相關的概念和具體技能(葉子)。當以這種方式建立時，學習將會呈現指數級的成長。

以他的教育心理學和程式設計經驗，Andrei 的課程將帶你瞭解複雜的主題，你從來沒有想過是可能的。

課程中見！

Ankita Kulkarni 開發者 | 教師 | 演講者 | 領導者

Ankita 擁有超過 10 年的軟體開發經驗，從幫助小型企業開發應用程式開始。目前，她是 WealthSimple 的高級工程經理，領導多個團隊並幫助定義加拿大金融科技的未來。她還曾在加拿大最大的電子商務公司之一擔任技術主管，在那裡她為 Shoppers Drugs Mart 提供了現代化的電子商務體驗。

此前，她是 Rangleio 的解決方案架構師和 IBM Garage 的首席開發人員，在那裡她使用 React、GraphQL 和 React Native 為客戶構建和擴展了許多 Web 和行動應用程式。她喜歡公開演講，並在世界各地的多個會議上發表過演講，這也讓她能夠追求她對旅行的熱情✈️

Ankita 已將大量應用程式投入生產並對其進行了擴展。 Ankita 還在 React Europe、React Amsterdam、Apollo GraphQL Summit 等會議上在全球範圍內進行了超過 15 場會議演講。

Zero To Mastery 學習業界需求技能，獲得工作

無論你是剛開始學習還是想提高技能，我們從零到精通，教你 React、JavaScript、Python、CSS 和更多需要的技能，幫你獲得僱用、提升職業生涯並在世界各地的公司取得成功。

按照你的日程安排學習。我們的綜合課程 24/7 提供 600 多個小時（而且還在增加！）的課程。你將學習從初學者程式基礎到最先進概念的所有內容。

建立你的作品組合。與大多數線上課程和免費教程不同，你將使用所學的一切來構建複雜、專業、真實的專案和你自己的專業作品集。

發展你的網絡。尋找下一個機會，獲得關鍵介紹，甚至會見聯合創始人。在我們蓬勃發展和支持的 ZTM 社區中，有人總是在線並願意伸出援手。

被雇用。你將獲得所需的知識、信心和經驗，從而在面試中脫穎而出，並獲得你能想像到的任何公司的 OFFER。

升職，成為前10%。我們的中級和高級課程可幫助你繼續培養自己的技能，晉升到高級職位，並讓你被公認為所在領域的佼佼者之一。

永遠不要停止成長。我們會定期發布新課程並為現有課程添加新內容，以確保你獲得最新資訊並保持領先地位。