iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

從零開始學習 Next.js 系列

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

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

Day21 - _ document 可以做什麼呢?

_document 可以做什麼呢? Next.js 除了 _app.tsx 之外,還提供另外一個 _document.tsx 讓我們使用,在進入怎麼使用 _do...

2021-10-06 ‧ 由 Leochiu 分享
DAY 22

Day22 - 錯誤捕捉、全域 CSS、共用 Layout,就用 _app.tsx 來搞定吧!

_app.tsx 可以做什麼? App 跟 Document 皆是 Next.js 的進入點,而 Document 的層級更高,Document 中的程式碼會先...

2021-10-07 ‧ 由 Leochiu 分享
DAY 23

Day23 - 在 Next.js 中如何共用 Layout

前言 在前一篇文章中,我們瞭解了怎麼使用 _app.tsx 撰寫共用 layout 的 component,由於 App 是一個頂層的 component,每個...

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

Day24 - 遇到 404 或 500 怎麼辦,客製化錯誤頁面

前言 在「錯誤捕捉、全域 CSS、共用 Layout,就用 _app.tsx 來搞定吧!」這邊文章中有提到,目前在 Next.js 的 error bounda...

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

Day25 - 如何在 Next.js 中正確地使用 lodash,使用 babel-plugin-import

前言 在前端通常會導入一些方便的 utility 函式庫,以 lodash 來說,它是一個夠幫我們處理各種資料的函式庫,可以減少寫一些比較瑣碎的程式碼,至今每週...

2021-10-10 ‧ 由 Leochiu 分享
DAY 26

Day26 - 移除沒用到的 CSS,使用 Purge CSS (feat. Ant Design, Tailwind)

前言 在前端的世界中,我們經常會站在巨人的肩膀上,如果任何事情都需要自己從零開始動手做,後續的維護也會耗費可觀的成本。例如想要一個好用的 UI framewor...

2021-10-11 ‧ 由 Leochiu 分享
DAY 27

Day27 - 在 Next.js 如何正確地使用 dynamic import

前言 在 Next.js 有一個很棒的優點是在 /pages 中的頁面預設 next build 時都會各自打包成獨立的檔案,SSG 的頁面會產生靜態的 HTM...

2021-10-12 ‧ 由 Leochiu 分享
DAY 28

Day28 - Next.js 如何優化圖片在網頁上的體驗?

Image optimzation 在 Next.js 10 版以後發佈了 <Image /> 這個 component,是由 Google Chr...

2021-10-13 ‧ 由 Leochiu 分享
DAY 29

Day29 - 當 Next.js 遇見了 Typescript

Typescript Next.js 目前已經支援 TypeScript,而且從 GitHub 中可以看到 TypeScript 占整體 codebase 的比...

2021-10-14 ‧ 由 Leochiu 分享
DAY 30

Day30 - 導入 Next.js 的雜談與系列文總結

尾聲 最後一天想回歸到第一天時對自己說的話「看完這些文章的讀者能夠對 Next.js 有更多的了解,能夠評估在團隊中導入 Next.js」,每多寫一篇文章就多進...

2021-10-15 ‧ 由 Leochiu 分享