Next.js 15 和 React - 完整指南

從頭開始學習 NextJS 15，並使用 App Router 或 Pages Router 建立全端 ReactJS + NextJS 應用程式！

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

了解如何使用 NextJS 14 和 App Router 建立全端 React 應用程式
建立真實的專案並應用你透過實踐專案和範例學到的知識
了解建立 NextJS 應用程式的不同方法 – App Router 與 Pages Router
開始使用 React 伺服器元件、客戶端元件、資料擷取等！
透過伺服器操作處理資料提交
了解所有關鍵的 NextJS 功能，例如預先渲染、SSR、資料擷取、基於檔案的路由和身份驗證
如果你的時間有限，請學習完整課程或「NextJS 摘要」模組以快速入門

要求

強烈建議具備 ReactJS 知識，不過課程涵蓋一個完整的 React 複習模組
不需要有NextJS的知識

課程說明

2024 年 10 月更新：

更新了內容以反映最新版本的 Next.js (15)。

2024 年 3 月/4 月更新：

完全更新了整個課程以涵蓋最新版本的 Next.js！

本課程向你介紹最新版本的 Next.js，並涵蓋「App Router」和「Pages Router」（並解釋這兩種方法是什麼）。

加入這個最暢銷的 NextJS 課程，學習如何使用 React 和 NextJS 建立高度動態、超快速且支援 SEO 的 React 應用程式！

本課程涵蓋 NextJS“App Router”和“Pages Router”——使用 React 建立全端應用程式的兩種不同方法！當然，你還將了解這兩種方法是什麼、為什麼存在兩種不同的方法以及每種方法的工作原理！

我創建了關於React 的最暢銷的 Udemy 課程，現在我非常高興與你分享這個NextJS – 這是一個關於令人驚嘆的React 框架的深入課程，它允許你作為React 開發人員邁出下一步並構建真正的生產環境 -使用 React 和 Next.js 準備好專案！

Next.js 是 ReactJS 的生產就緒型、具有全端功能的框架 – 這是當今你可以學習的最受歡迎的 JavaScript library (程式庫)！

太多流行語不符合你的口味？

很公平 – 但事實上，NextJS 是作為 React 開發人員成長並將你的 React 應用程式提升到新水平的絕佳選擇！

因為 NextJS 成長迅速，因此需求量很大。這是有充分理由的：NextJS 可讓你建立具有內建伺服器端渲染和頁面預先渲染的 React 應用程式。建立出色的用戶體驗和搜尋引擎友好（SEO！）React 應用程式從未如此簡單！

此外，NextJS 也讓建立全端 React 應用程式（前端 + 後端程式碼合併在一個專案中）變得非常容易！混合客戶端和伺服器端程式碼，並與前端 React 應用程式並行建立基於 NodeJS 的 API。使用 NextJS 輕而易舉！

想要新增身份驗證嗎？ NextJS 也簡化了這個過程，讓用戶註冊、登入和會話管理變得非常方便。

本課程將帶你立即從 NextJS 初級到高級！

我們將從最基本的知識開始，根本不需要 NextJS 知識，然後我們將深入探討構成 NextJS 的所有核心功能。無論是在理論上或多個實際專案中，所有概念都將逐步應用。

對於本課程，你需要基本的 React 知識，儘管課程確實附帶了「React 複習」模組，以防你距離上次使用 React 已經有一段時間了。

本課程還包括用於頁面路由器的「NextJS 摘要」模組和用於應用程式路由器的「NextJS Essentials」模組 – 讓你將來隨時返回課程並刷新你的知識，而無需再次學習完整課程。或者你只需使用這些摘要模組（暫時跳過其餘部分）即可在盡可能短的時間內了解所有核心功能。

完成本課程後，你將做好充分準備從頭開始建立自己的 NextJS 專案併申請 NextJS 職位！

詳細來說，本課程將包括

什麼是 NextJS？為什麼要使用它？
為什麼僅僅 React（在很多情況下）還不夠？
從頭開始建立 NextJS 專案並理解這些項目
使用基於檔案的路由
新增動態路由和包羅萬象的路由
實現不同形式的頁面預渲染和服務端渲染
處理資料並將資料獲取+預取新增至你的應用程式中
使用伺服器操作處理表單提交
處理文件上傳
預先產生動態和靜態頁面
為頁面新增元資料等優化
使用 NextJS Image 元件優化影像
使用 API 路由或伺服器操作建立全端應用程式
使用 React 上下文管理應用程式範圍的狀態（在 NextJS 應用程式中）
在 NextJS 應用程式中新增身份驗證
我們將在多個完整的應用程式中應用所有這些核心概念！
一個完整的 React.js 複習模組（以便我們都在同一頁上）
NextJS 摘要模組，以便你可以刷新所學或快速探索核心功能
還有更多！

我迫不及待地想和你一起開始這段旅程! 🙂

目標受眾

想要邁出下一步並建構營運就緒的 React apps 的 React 開發人員
以建構全端 React apps 為目標的 React 開發人員。
想要使用最流行和需求的技術堆疊之的一般的 Web 開發人員

講師簡介

Maximilian Schwarzmüller，專業網站開發人員和教練 ( 更多講師主講的課程介紹 )

擔任 Web 開發者的經驗

從 12 歲開始，我從未停止學習新的程式設計技能和語言。我很早就開始為朋友創建網站，也只是為了好玩。除了 Web 開發之外，我還探索了 Python 和其他非 Web 專用語言。這種熱情一直持續至今，並促使我決定成為一名自由網路開發人員和顧問。我在這份工作中獲得的成功和樂趣是巨大的，並且真正讓我的熱情洋溢。

在後端開始 Web 開發（使用 Laravel、NodeJS、Python 的 PHP），我也越來越成為一名前端開發人員，在許多專案中使用 React、Angular 或 VueJS 等現代框架。我現在喜歡兩個世界！

我還建構了全端應用程式並獲得了專業的 DevOps 和雲端運算知識——我持有的許多 AWS 認證（包括頂級解決方案架構師專業認證）證明了這一點。

作為一名自學成才的開發人員，我有機會通過攻讀工商管理並獲得碩士學位來拓寬自己的視野。這使我能夠在一家大型戰略諮詢公司和一家銀行工作。在學習的同時，我比這些領域更享受發展，在這個領域的時間大大提高了我的整體經驗和技能。