iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

Nextjs 13: 建構專屬於你的 SSR 網站! 系列

Next.js 是一個以 React 為基礎的套件,Next 的出現讓 React 不再僅能建構 CSR (Client SIde Rendering) ,而能建構一個保有 React 特色與優勢的 SSR (Server SIde Rendering)/SSG (Server Side Generate) 網站。
Next 於去年升級至 v13 ,結合 React 的新功能推出了全新的 App Route 建構方式。新的 Next 13 與過去的 Next 有什麼不同?要怎麼用?會踩到什麼雷?讓我用這三十天鐵人賽介紹給你!

參賽天數 9 天 | 共 9 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 1

[next 13] - Nextjs 13 簡介 & 選擇題目理由

前言 隔了一年,我又來鐵人賽挑戰自我啦!去年寫的是 React 的介紹,實際進入業界後發現 React 的生態系比自己想像的更廣更深,還有很多東西可以深挖。這次...

2023-09-16 ‧ 由 時雨 分享
DAY 2

[next 13] - Next 是什麼?

今天會介紹一下 Next 是什麼、為什麼要使用 Next,來幫助一些沒什麼接觸 Next 的朋友快速認識什麼是 Next。 Next 出現背景 如同上一篇講的,...

2023-09-17 ‧ 由 時雨 分享
DAY 3

[next 13] - Next 13.4 - 全新版本的 Next

升版後的 Next Next 在今年升版到 13.4,並增加了許多新的功能,同時也大幅翻轉了原先的寫法。 總的來說,新版本的 Next 將 data fetch...

2023-09-18 ‧ 由 時雨 分享
DAY 4

[next 13] - Next 環境建置及技術選型

今天我們要來講如何做 Next 的環境建置,以及為 Next 的專案做技術選型,未來的程式範例以及專案實作都會以這個技術選型基礎為準喔! 環境建置 Node.j...

2023-09-19 ‧ 由 時雨 分享
DAY 5

[next 13] - App Router 概念

今天要來介紹 next 13 推出的一個重要概念: app router,這是一個全新的 file-base system,取代原有的 pages router...

2023-09-20 ‧ 由 時雨 分享
DAY 6

[next 13] - Client Component

今天要來介紹 client component 的用法,其實 client component 就是過去 next 12 常用的 component,功能上大同...

2023-09-21 ‧ 由 時雨 分享
DAY 7

[next 13] - server component

昨天介紹了 client component,今天要介紹 next 13 推出的新功能: server component。server component 可...

2023-09-22 ‧ 由 時雨 分享
DAY 8

[next 13] - components render 機制

前面做了關於 client component 以及 server component 的基本介紹,這一篇來介紹一下他們背後的 render 機制。 新的 re...

2023-09-23 ‧ 由 時雨 分享
DAY 9

[next 13] - data fetch

今天要接著介紹網頁開發很重要的一環, data fetch。很多時候我們開發功能時,往往需要從外部拿取資料,要如何拿取資料就是很重要的問題。這一篇會來介紹如何在...

2023-09-24 ‧ 由 時雨 分享