iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

從零開始學習 Next.js 系列

對於工程師來說選擇用什麼樣的技術,背後都是取決於商業策略需要什麼,以常見的 SSR、pre-rendering 來說,不外乎是希望網站整體的 SEO 能夠變好,或是提升使用者體驗。而現在 SPA 盛行的時代,許多網站在沒有框架或後端支援的情況下,僅僅使用像是 React 或 Vue 等前端框架,要做到 SSR 或 pre-rendering 還需要做許多設定,做這些技術研究都得花費時間成本與心思,最後才能導入到專案中。Next.js 幫助工程師事半功倍,不必再花費很多時間處理 pre-rendering 或 SSR 等等的問題,而是利用框架的優勢,讓工程師更專注在開發核心功能上面。

鐵人鍊成 | 共 30 篇文章 | 126 人訂閱 訂閱系列文 RSS系列文 團隊StarBugs 星巴哥技術週刊
DAY 1

Day01 - 系列文介紹、規劃

前言 大家好,我是 Leo,這是我第一次參加 IT 鐵人,心裡滿是期待。過去只有在 Medium (筆名 Airwaves) 上經營自己的技術部落格,每年到了...

2021-09-16 ‧ 由 Leochiu 分享
DAY 2

達標好文 Day02 - 為什麼你需要 Next.js ?

為什麼你需要 Next.js ? 對於工程師來說選擇用什麼樣的技術,背後都是取決於商業策略需要什麼,以常見的 SSR (Server Side Renderi...

2021-09-17 ‧ 由 Leochiu 分享
DAY 3

達標好文 Day03 - 深入淺出 CSR、SSR 與 SSG

前言 在這篇文章中,我們來聊聊 CSR、SSR 與 SSG 的不同,這三者皆是現今常被提到的網頁技術,而 Next.js 同時支援了這三種技術,我們可以在不同的...

2021-09-18 ‧ 由 Leochiu 分享
DAY 4

Day04 - Next.js 的 file-based routing

Page Next.js 的 routing 跟一般常見的 react + react-route-dom 的組合不太一樣,是採用 file-based rou...

2021-09-19 ‧ 由 Leochiu 分享
DAY 5

Day05 - 使用 Link 實作換頁

Link 在了解了 Next.js 的三種路由方式後,接下來就讓我們來聊聊怎麼在 component 切換頁面吧! 在 Next.js 中切換頁面是用 clie...

2021-09-20 ‧ 由 Leochiu 分享
DAY 6

Day06 - 用 Next.js 做一個簡易產品介紹頁,使用 file-based routing

前言 在前幾篇文章中,我們瞭解了 Next.js 的 file-based routing 機制,知道了三種不同的 routing 模式,並且也知道要怎麼使用...

2021-09-21 ‧ 由 Leochiu 分享
DAY 7

Day07 - 在 Next.js 中使用 pre-rendering (getStaticProps) — Part 1

前言 Next.js 的 pre-rendering 實作是這個框架的一大賣點,在 Next.js 中的 pre-rendering 有兩種實作方法,一個是 S...

2021-09-22 ‧ 由 Leochiu 分享
DAY 8

Day08 - 在 Next.js 中使用 pre-rendering (getStaticProps) — Part 2

前言 在前一篇文章中,我們暸解了如何使用 getStaticProps 讓 Next.js 可以在打包階段產生靜態的 HTML 檔案,讓使用者在瀏覽指定網站時,...

2021-09-23 ‧ 由 Leochiu 分享
DAY 9

Day09 - 在 Next.js 中使用 pre-rendering (getServerSideProps)

前言 Next.js 的 pre-rendering 分成兩種形式,一種是 SSG (Static Side Generation),另一種是 SSR (Ser...

2021-09-24 ‧ 由 Leochiu 分享
DAY 10

Day10 - 為什麼官方不推薦使用 getInitialProps

getInitialProps 是較為老舊的 API Next.js 9.3 版本後,官方釋出了兩個新的 API 分別為 getStaticProps 與 ge...

2021-09-25 ‧ 由 Leochiu 分享