系列文章
Day11 - 在 Next.js 中使用 CSR - feat. useSWR
為什麼我們需要 SWR ? 先前我們已經暸解了 CSR、SSR 與 SSG 的優劣，SSR 與 SSG 都是 pre-rendering 的策略，在 Next....
Day12 - 該來寫 API 了，API routes 簡介
API routes Next.js 是一個全端框架，除了提供 SSR 與 SSG 的功能之外，還能夠建立 API 提供前端頁面使用。 你可以使用 API ro...
Day13 - 重構產品頁面 API，使用 API routes - feat. MongoDB
重構產品頁面 API 在這個章節中，我們將使用 API routes 重構在前面章節中撰寫的「產品列表頁面」與「產品詳細頁面」，已知這兩個頁面有兩個 API e...
Day14 - 在 Next.js 如何做 authentication
Authentication 在 web 應用中經常需要驗證使用者的權限，例如登入與未登入能看到的頁面可能會不同，需要透過一些方式驗證使用者是否能夠進入該頁面。...
Day15 - 在 Next.js 做 JWT 驗證，使用既有的 Backend API - PART 1
NextAuth + JWT authentication 雖然 Next.js 的定位是一個全端框架，能夠撰寫 API route 並且在裡面串接資料庫，如果...
Day16 - 在 Next.js 做 JWT 驗證，使用既有的 Backend API - PART 2
在頁面中串接驗證 API 在前一篇文章中，我們建立了一個 JWT JSON server，用來練習如何在 Next.js 中串接 JWT 驗證，這個 JSON...
Day17 - 把 Next.js 部署到 Vercel 上吧！
部署至 Vercel Vercel 是一個定位在部署前端應用的雲端平台，除了 Next.js 以外，也支援了現今許多常見的前端框架，例如 Nuxt.js、Sve...
Day18 - 如何在頁面中預先載入其他的頁面 (prefetch)
前言 在前面的章節已經介紹了 Next.js 是 file-based routing 的架構，在路由至其他頁面時，通常會使用到 <Link />...
Day19 - 寫出更有品質的程式碼，信 eslint 得永生
前言 俗話說：「一千個人，就有一千種程式碼的寫法」，而且我們身在 JavaScript 的世界中，一段程式碼可以用各種不同的方式來表達，例如該用單引號或雙引號、...
Day20 - 提開發者體驗 (DX)，使用 path alias
前言 今天我想來點輕鬆的議題，是一個大家在開發專案時都會遇到的狀況。在開發時有時候資料夾結構會變得很深，想要拿到外部的檔案時以相對路徑的方式會很麻煩： impo...