iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

從零開始學習 Next.js 系列

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

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

Day11 - 在 Next.js 中使用 CSR - feat. useSWR

為什麼我們需要 SWR ? 先前我們已經暸解了 CSR、SSR 與 SSG 的優劣,SSR 與 SSG 都是 pre-rendering 的策略,在 Next....

2021-09-26 ‧ 由 Leochiu 分享
DAY 12

Day12 - 該來寫 API 了,API routes 簡介

API routes Next.js 是一個全端框架,除了提供 SSR 與 SSG 的功能之外,還能夠建立 API 提供前端頁面使用。 你可以使用 API ro...

2021-09-27 ‧ 由 Leochiu 分享
DAY 13

Day13 - 重構產品頁面 API,使用 API routes - feat. MongoDB

重構產品頁面 API 在這個章節中,我們將使用 API routes 重構在前面章節中撰寫的「產品列表頁面」與「產品詳細頁面」,已知這兩個頁面有兩個 API e...

2021-09-28 ‧ 由 Leochiu 分享
DAY 14

Day14 - 在 Next.js 如何做 authentication

Authentication 在 web 應用中經常需要驗證使用者的權限,例如登入與未登入能看到的頁面可能會不同,需要透過一些方式驗證使用者是否能夠進入該頁面。...

2021-09-29 ‧ 由 Leochiu 分享
DAY 15

Day15 - 在 Next.js 做 JWT 驗證,使用既有的 Backend API - PART 1

NextAuth + JWT authentication 雖然 Next.js 的定位是一個全端框架,能夠撰寫 API route 並且在裡面串接資料庫,如果...

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

Day16 - 在 Next.js 做 JWT 驗證,使用既有的 Backend API - PART 2

在頁面中串接驗證 API 在前一篇文章中,我們建立了一個 JWT JSON server,用來練習如何在 Next.js 中串接 JWT 驗證,這個 JSON...

2021-10-01 ‧ 由 Leochiu 分享
DAY 17

Day17 - 把 Next.js 部署到 Vercel 上吧!

部署至 Vercel Vercel 是一個定位在部署前端應用的雲端平台,除了 Next.js 以外,也支援了現今許多常見的前端框架,例如 Nuxt.js、Sve...

2021-10-02 ‧ 由 Leochiu 分享
DAY 18

Day18 - 如何在頁面中預先載入其他的頁面 (prefetch)

前言 在前面的章節已經介紹了 Next.js 是 file-based routing 的架構,在路由至其他頁面時,通常會使用到 <Link />...

2021-10-03 ‧ 由 Leochiu 分享
DAY 19

Day19 - 寫出更有品質的程式碼,信 eslint 得永生

前言 俗話說:「一千個人,就有一千種程式碼的寫法」,而且我們身在 JavaScript 的世界中,一段程式碼可以用各種不同的方式來表達,例如該用單引號或雙引號、...

2021-10-04 ‧ 由 Leochiu 分享
DAY 20

Day20 - 提開發者體驗 (DX),使用 path alias

前言 今天我想來點輕鬆的議題,是一個大家在開發專案時都會遇到的狀況。在開發時有時候資料夾結構會變得很深,想要拿到外部的檔案時以相對路徑的方式會很麻煩: impo...

2021-10-05 ‧ 由 Leochiu 分享