Contents
透過使用 MERN Stack with React/Next.js for SSR 建立一個真正的真實世界的 SEO Web 應用程式,成為一個終極的 Web 開發人員。
從這 20.5 小時的課程,你會學到
- 使用者註冊/登入
- 忘記密碼/重設密碼
- 使用者註冊時的賬戶啟用
- 使用 Google 的 Social login
- 基於 JWT 的認證系統
- 管理員/使用者儀表板
- 基於角色的授權系統
- 帶有圖片上傳的高階 CRUD
- 部落格搜尋
- 載入更多部落格
- 類別
- 標籤
- SEO – 搜尋引擎最佳化
- 在伺服器上執行的實用真實世界專案
- 使用 Node Express MongoDB 的 API 開發
- 使用 React Hooks 和 NextJs 的前端 Web 開發
- 使用 NextJs 的 SSR
- 帶有部落格列表和聯絡表格的使用者公共檔案頁
- 部落格作者的私人聯絡表格
- 使用者私人儀表板
- 多使用者授權系統
- 可擴充的多使用者系統,以建立市場應用程式
- 標準聯絡表
- DISQUS 評論系統
- 相關部落格
- 谷歌分析整合
- 用於傳送郵件的 Sendgrid
- 部署到 Digital Ocean 雲端伺服器上
- 新增網域名稱
- Cloudflare CDN和免費SSL
- 編寫簡潔的程式碼
- 可擴充的專案結構
要求
- 基本瞭解 JavaScript 或任何其他程式語言
- 對 React Js 的基本瞭解
- 對 Node Js 的基本瞭解
課程說明
掌握使用MERN(Mongo Express React Node)堆疊建構真實世界SEO Web應用程式的藝術。透過這個基於專案的終極課程,你將學會建立真正在伺服器上執行 Web 應用程式,成為一個真正的網路開發人員。)
歡迎學習使用 React Node Mongo DB 和 NextJs 的全端/MERN 堆疊 Web開發。在本課程中,您將學習如何使用Node、Express和 Mongo DB 建構後端API。你將學會用 React 和 NextJs 建構前端 Web 應用程式。您將學習使用NextJs 建構 SEO Web 應用程式,這是一個用於建構營運等級的 React 應用程式框架。
在本課程結束時,你將建立一個營運就緒的 SEO 多使用者部落格平台。本課程是你建立全端 MERN Web 應用程式的終極講習班,詳細關注 Node React NextJs 和SEO。
為什麼我們選擇 React Node NextJs 來建立 SEO 部落格專案?
- 我們選擇 Node React 和 NextJs 是因為它們都使用相同的程式語言 JavaScript。因此,即使這是一個具有獨立 API和獨立前端的 FullStack 應用程式,我們將只處理一種語言 – JavaScript。
- 我們選擇 Node js 和 Mongo DB 來建構 API,因為它非常簡單、靈活且易於擴充
- 我們選擇 React 是因為它非常強大,效能好,而且最近隨著 Hook 的引入變得非常有趣和容易使用
- 我們選擇 NextJs 是因為它將 React 應用程式的開發過程提升到了全新的水平
- NextJs 開箱即有SSR,而 SSR 對於 SEO 是必須的
- NextJs 從第9版開始會自動判斷你的網頁是作為靜態頁面還是動態頁面提供
- 如果你的頁面沒有向後端伺服器請求獲取資料,那麼 NextJs 會自動將該頁面作為靜態頁面提供
- 靜態頁面的載入速度非常快,因為它們是靜態的,不需要等待伺服器響應
因此,你可以把你的網站主頁或登陸頁面建成一個靜態頁面,並配有靜態內容,如預先寫好的文字和圖片,使其速度極快。
我曾專業地使用 NextJs 建立一個 Web 應用程式,它在谷歌頁面速度測試中獲得了100分的高分。這很難讓人相信,但卻是事實!
NextJs如何使你的網頁服務如此之快?
- 首先,NextJs 在建構過程中會分析網頁是可以作為靜態還是動態提供。因此,如果一個頁面可以以靜態方式提供,它就會以靜態方式提供,從而使其比需要伺服器響應的頁面更快
- 第二個原因是,即使你的登陸頁面可能有很多圖片,但它們是作為靜態內容提供的,所以頁面首先以實際內容(文字/html)載入,而不需要等待圖片,結果頁面在不到一秒鐘內就載入完畢
- NextJs 從第9版開始自動在幕後預取頁面,所以當主頁被載入時,只要你使用下一個連結元件,你的網站的其他頁面就會在幕後被預取。因此,當用戶導航到不同的頁面時……速度快如閃電
- 有了 NextJs,你所有的頁面都是搜尋引擎最佳化的,所以無論是靜態還是動態頁面,它們都是搜尋引擎最佳化的
不想學習另一個框架?
- 我也是 🙂 NextJs最大的特點是它和 React 差不多。你仍然可以按照你通常使用 React 的方式來建立元件
- 只有一些區別,比如路由和 NextJs 提供的生命週期方法(getInitialProps),這使得 SSR 成為可能
- 在建構這個很棒的專案時,你會學到關於 NextJs 的所有好東西
因此,如果你想建立效能極高的應用程式,將所有競爭對手甩在身後,在人群中脫穎而出,本課程將告訴你如何建立這樣的應用程式。
這個部落格應用程式是為營運使用而建構的,並且足夠靈活,你可以將其作為一個人的部落格平台或企業的部落格平台來使用,或者作為市場應用程式的基礎,因為它有基於角色的多使用者部落格系統在那裡。
因此,請加入我的課程,並開始一起編碼這個令人敬畏的應用程式。
目標受眾
- 一個希望使用 Node JS 和 MongoDB 建構 API 的 Web 開發者
- 一個希望使用 React 和 NextJs 建構快速、互動和可擴充的 Web 應用程式的 Web 開發人員
- 一個希望使用 MERN 堆疊建立一個全端 SEO 多使用者部落格應用程式的Web開發人員
- 一個希望使用 Next Js 建構 SSR React 應用程式的 Web 開發者
- 一名 Web 開發人員希望透過基於角色的認證和授權系統建立營運就緒的應用程式
- 一個希望使用 React Node 和 NextJs 建立實用的現實世界專案的Web開發人員
講師簡介
Ryan Dhungel 網頁開發者 ( 更多講師主講課程介紹 )
Ryan Dhungel 是一名來自澳大利亞雪梨的網頁開發者。 他建立了網站和 Web 應用程式, 主要關注於 PHP 和 Laravel 和 JavaScript 以及 React。
他還希望透過為其他開發人員製作解釋清楚實用的指南和培訓課程,使整個 web 開發過程既愉快又富有成效。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
- 點選這個✨優惠連結✨ 課程特價 | Udemy 永久擁有課程 NT390 起( 在電腦瀏覽器登入,點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得 )
- Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- $代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程
也許你會有興趣
- 使用 React 和 Node 的完整 Next.js 課程 – 建立漂亮的作品組合
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!