iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

從 React 學 Next.js:不只要會用,還要真的懂 系列

潛水了一年,終於鼓起勇氣第二次挑戰鐵人賽。
這次將延續前一次的主題,從 React 繼續往 Next.js 學習。雖然主題不同,但是核心目標不變,一樣是希望自己能透過這三十天的挑戰,「不只要會用,還要真的懂」。另外這次預計還會搭配實作去觀察、了解 Next.js,以達成「真的懂」的目標!

雖然男主角變成 Next.js 了,畫面會以 Next.js 為主,但是 React 依然會時不時地出現。
這 30 天,就讓我們一起和 Next.js 及 React 好好相處吧 :)

鐵人鍊成 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 21

【Day 21】Middleware 是什麼?伺服器層級的權限控制

這幾天我們連續看了一些 Router 的用法,今天我們稍微偏離 Router 一下,從用 Router 設定權限控制的實作情境,延伸到另一個不同層面的權限控管方...

2025-09-28 ‧ 由 文科少女 分享
DAY 22

【Day 22】Next.js App Router 的進階用法 1 - Route Groups 和 Private Folders

前面我們已經陸續看了很多天關於 Next.js Router 的用法,接下來幾天我們會來看一些使用 App Router 時,才可以使用的 Router 進階用...

2025-09-29 ‧ 由 文科少女 分享
DAY 23

【Day 23】App Router 的進階用法 2 - Parallel Routes

昨天我們已經看了 Next.js App Router 的 Route Groups 和 Private Folders 的使用方式,今天接著再來看另一個 Pa...

2025-09-30 ‧ 由 文科少女 分享
DAY 24

【Day 24】App Router 的進階用法 3 - Intercepting Routes

昨天看了 App Router 中一個可以透過建立 slot 設定為平行路由的實作方式,今天再來看一個很類似,但應用情境有點不同的 App Router 的進階...

2025-10-01 ‧ 由 文科少女 分享
DAY 25

【Day 25】Next.js 的圖片優化方式 - Image:你可能不需要額外使用它

說到在畫面中加入圖片,大家第一個想法都是使用 <img> 標籤,但是在 Next.js 卻另外提供了一個也是用來放上圖片的用法 <Image&...

2025-10-02 ‧ 由 文科少女 分享
DAY 26

【Day 26】Next.js 的 JavaScript 載入優化方式 - next/dynamic

昨天看過圖片的優化方式,今天接著再來看看載入 JavaScript 的優化方式。在正式來看為什麼需要額外做一些動作來優化 JavaScript 的載入之前,我們...

2025-10-03 ‧ 由 文科少女 分享
DAY 27

【Day 27】用 Next.js 進行 SEO:Meta 設定與常見誤區

說到 Next.js,除了檔案系統的路由設定很便利外,應該還會想到「對於 SEO 很友善」的這部分。今天就讓我們來看看 Next.js 究竟為什麼會大家當做寫...

2025-10-04 ‧ 由 文科少女 分享
DAY 28

【Day 28】Next.js 是成為全端框架?!建立 API 和直接接觸後端 DB 的方式

一直以來專注在前端領域的我,有一天突然聽到身邊的朋友跟我說:「你是寫全端的喔?」我黑人問號了一下,回他:「不是,我是寫前端的,我是前端工程師。」 一來一往的對話...

2025-10-05 ‧ 由 文科少女 分享
DAY 29

【Day 29】打包工具 Turbopack 與 Webpack

前面我們看了很多關於 Next.js 的用法,最後我們也來認識一下 Next.js 提供的打包工具 Turbopack。 什麼是打包工具? 打包工具是能夠將整個...

2025-10-06 ‧ 由 文科少女 分享
DAY 30

【Day 30】從 React 學 Next,js!總回顧之常見誤解 &完賽感言

時間咻一下地就來到了第 30 天,在這段期間看了很多自己不熟悉的部分,也看了自己以為自己已經熟悉的部分,但卻從過程中發現到自己原來對於 Next.js 有一些誤...

2025-10-07 ‧ 由 文科少女 分享