使用 NextJS 和全新的「應用程式路由( App Router )」架構創建作品集應用程式!掌握最新的 Next.js、React.js 和 Node.js 技巧。
從這 44 小時的課程,你會學到
- 使用 Next & React 開發強大的伺服器端和真實世界的 web 應用程式
- 完全理解以 Next 為架構的開發流程
- 建立 SEO (Search Engine Optimisation,搜尋引擎優化)和同構( Isomorphic )友好的應用程式
- 在令人興奮的 Next 和 React 網頁開發環境中建立自己的領域
要求
- 掌握 HTML 和 CSS 基礎知識
- 需要具備基本的 JavaScript 知識。
課程說明
這門課程適合你嗎?
如果你打算開啟開發者職涯或提升程式設計技能,這門課程正是你的理想之選。學習如何建立一個出色的作品集網站,與同事或未來雇主分享。
一門課程,掌握 Web 開發所需的一切!從 Web 開發技術入手,逐步深入學習更進階的主題,直到你的應用程式部署到 Heroku 或 Vercel 平台,並可在網路上存取。本課程涵蓋最新主題以及 React JS 和 Next JS 版本。
課程架構如下:
- 【專案一】:資源應用(入門級)
- 【專案二】:內容應用(入門級)
- 【專案三】:作品集應用(入門/中級)
什麼是 Next.js?
Next.js 是一個 React 框架,它為伺服器端渲染 (SSR) 應用提供基礎架構和簡潔的開發體驗。
- 它擁有直覺的基於頁面的路由系統(支援動態路由)。
- Next.js 支援頁面層級的預先渲染,包括靜態產生 (SSG) 和伺服器端渲染 (SSR)。
我們將要開展什麼工作?
專案 1:資源專案
- 本專案旨在協助您全面理解 Web 開發中的基本概念。
- 您將掌握狀態(state)的概念,它代表 React 元件中的動態數據,並學習如何有效地管理狀態。
- 理解屬性(props)是本專案的重要組成部分,屬性用於在組件之間傳遞資料。
- 您將全面了解 React 中元件的概念,以及如何在應用程式中建立和使用元件。
- 本專案主要關注 React 和 Next.js,這兩個流行的 JavaScript 程式庫/框架用於建立現代 Web 應用程式。
專案 2 :內容應用
- 學習 Next.js 13 的最新「應用架構」。
- 探索 React 和 Next.js 的最新變化。
- 建立一個用於管理 Markdown 格式作品集和部落格的內容應用程式。
- 發現新的 API 函數。
- 理解專案組織結構。
- 深入了解這些框架的工作原理。
專案 3:大型作品集專案
- 建置佈局:
- 建立可重複使用的元件,例如導覽列和作品集卡。
- 講解伺服器端渲染和資料擷取技術。
- 身份驗證:
- 使用 Auth0 進行身份驗證。
- 使用者註冊、登入和存取控制。
- 管理身份驗證狀態並進行 UI 變更。
- 作品集功能:
- 實作建立、更新和刪除功能。
- 使用 Next.js 實作即時更新和快速靜態頁面。
- 部落格:
- 使用富文本編輯器建立部落格。
- 撰寫和發布部落格。
- 管理用戶部落格和 SEO。
- SEO (Search Engine Optimization):
- SEO 基礎知識及其與 Next.js 的整合。
- 部署:
- 將 Express API 伺服器部署到 Heroku。
- 將 Next.js 作品集套用部署到 Vercel,使其可在網路上存取。
目標受眾
- 本課程面向對 Next、React 和 Node 等現代框架感興趣的初學者和經驗豐富的開發者。
- 本課程適合所有渴望了解 JavaScript 框架運作原理的人。
- 學習本課程後,您將能夠以簡單易懂的方式向同事解釋複雜的概念。
講師簡介
Filip Jerga 軟體工程師 ( 更多講師主講課程介紹 )
我的名字是 Filip Jerga。 我是一名軟體工程師,目前擔任自由開發人員。 我擁有人工智慧碩士學位,多年來我從事過各種專案和技術的工作,從開發 C ++ 超音波設備軟體到在 React 和 Angular 等現代框架中製作行動應用程式。
在我的職涯中,我匯集了足夠的經驗,能夠與許許多多人分享。 我正在投入大量細節和精力,以最簡單易懂的方式解釋問題和程式設計的主題。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
- Udemy 永久擁有課程 許多課程約 NT400(點擊連結看更多)
- ✨年訂閱每月 NT350 ( ⏳再享 25%off ) 🌈 悠遊 Udemy 的 26000+ 門課,最大化學習 ( 原價 NT635/月 )
- Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- $代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程

也許你會有興趣
- React 學習地圖
- NodeJS 相關線上課程介紹
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!
你必須登入才能發表留言。