Contents
使用最新的 Next.JS; React(Next 9.4+, React hooks)建置你的部落格應用程式,學習如何使用 Headless Sanity CMS.
從這 13 小時的課程,你會學到
- 使用最新的 Next/React 功能 ( getStaticProps、 getStaticPaths、 getserversiondeprops )
- 建立靜態生成的 Web 應用程式
- 部署無伺服器應用程式
- 整合 Sanity CMS
要求
課程說明
什麼是 Sanity ?
Sanity 是結構化內容的平台。使用 Sanity,你可以使用 API 管理文字、影像和其他媒體。還可以使用開放原始碼單頁應用程式 Sanity Studio 快速設定可以自訂的編輯環境。用 Sanity,你可以訪問一系列 APIs、程式庫和工具,這些可以幫助你充分利用將所有內容作為單一真實來源的好處。本課程將帶你瞭解一些核心概念,給你很好的開始。
什麼是 Next JS?
Next JS 是 React 框架,它為伺服器端渲染(SSR,Server Side Eendered )應用程式提供基礎設施和簡單的開發經驗。
- 一個直觀的基於頁面的路由系統(有動態路由支援)
- 預渲染,在每頁的基礎上靜態生成(SSG)和伺服器端渲染(SSR)都支援
關於主要專案
我們將以為你準備的一個非常乾淨的應用程式佈局的整合開始。我們將遵循 React 和 Next JS 的最新實踐,這意味著我們將盡可能多地使用 hook 函數。
在建立初始佈局和頁面之後,我們將開始在 Sanity Studio 中準備實際的資料。我將向你解釋 Sanity 的基本知識,我們將準備兩種類型的文件 – 部落格和作者。
我們將指定描述資料的各種欄位,例如“程式碼區塊”、“影像”和許多其他欄位。
在獲取資料之後,我們就可以在應用程式頁面中顯示部落格了。你將學習如何處理影像以及如何將樣式應用到程式碼區塊中。
在本課程的後面,你將學習如何對應用程式檢視應用不同的篩選選項,如何對項目分頁,以及如何管理資料排序。你將學習如何使用提供者和消費者/概念,我們將使用這些概念來管理我們應用程式的明暗主題。
接下來我們將討論預覽( Preview )功能。預覽功能可以在部落格資料草稿發佈到線上前顯示。
在課程的最後,我們將把我們的應用程式部署到 Vercel 平台。應用程式將靜態優化且超級快速。
感謝你的時間,我希望在課程中見到你。
目標受眾
- 新入門的開發人員,對 Sanity CMS 的 Next JS/React 好奇
- 有經驗的開發人員,希望學習 Next JS 的新功能
- 開發人員,正在尋找一種簡單的方法來整合和部署他們自己的 CMS
講師簡介
Eincode by Filip Jerga 線上教育 ( 更多講師主講課程介紹 )
Eincode 確保為使用者提供最好的線上學習體驗。
由實戰專案配合高品質的內容和程式設計概念說明是 Eincode 擅長的領域!
Eincode 目前涵蓋的課程主要集中在網路和行動開發的程式設計指南。如果你正在尋找完整和全面的指南,那麼 Eincode 是你的好選擇。
課程也由講師 Filip Jerga 出版。
乾杯 & 繼續你的程式設計!
Filip Jerga 軟體工程師 ( 更多講師主講課程介紹 )
我的名字是 Filip Jerga,我是一個有經驗的軟體工程師和自由開發者。我擁有人工智慧碩士學位和多年從事各種技術和專案的工作經驗,從超聲( ultrasound )裝置的 C++ 開發到現代行動和網路應用的 React 和 Angular。
在我的職業生涯中,我已經獲得了先進的技術知識和技能以清楚和詳細地向廣大聽眾解釋程式設計主題。我邀請你參加我的課程,在這個課程中,我花了很多精力用一種詳細的、實踐的和可理解的方式來說明網路和軟體工程的概念。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
報名參加課程
也許你會有興趣
- React 前端開發學習地圖
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!