對於工程師來說選擇用什麼樣的技術,背後都是取決於商業策略需要什麼,以常見的 SSR、pre-rendering 來說,不外乎是希望網站整體的 SEO 能夠變好,或是提升使用者體驗。而現在 SPA 盛行的時代,許多網站在沒有框架或後端支援的情況下,僅僅使用像是 React 或 Vue 等前端框架,要做到 SSR 或 pre-rendering 還需要做許多設定,做這些技術研究都得花費時間成本與心思,最後才能導入到專案中。Next.js 幫助工程師事半功倍,不必再花費很多時間處理 pre-rendering 或 SSR 等等的問題,而是利用框架的優勢,讓工程師更專注在開發核心功能上面。
為什麼我們需要 SWR ? 先前我們已經暸解了 CSR、SSR 與 SSG 的優劣,SSR 與 SSG 都是 pre-rendering 的策略,在 Next....
API routes Next.js 是一個全端框架,除了提供 SSR 與 SSG 的功能之外,還能夠建立 API 提供前端頁面使用。 你可以使用 API ro...
重構產品頁面 API 在這個章節中,我們將使用 API routes 重構在前面章節中撰寫的「產品列表頁面」與「產品詳細頁面」,已知這兩個頁面有兩個 API e...
Authentication 在 web 應用中經常需要驗證使用者的權限,例如登入與未登入能看到的頁面可能會不同,需要透過一些方式驗證使用者是否能夠進入該頁面。...
NextAuth + JWT authentication 雖然 Next.js 的定位是一個全端框架,能夠撰寫 API route 並且在裡面串接資料庫,如果...
在頁面中串接驗證 API 在前一篇文章中,我們建立了一個 JWT JSON server,用來練習如何在 Next.js 中串接 JWT 驗證,這個 JSON...
部署至 Vercel Vercel 是一個定位在部署前端應用的雲端平台,除了 Next.js 以外,也支援了現今許多常見的前端框架,例如 Nuxt.js、Sve...
前言 在前面的章節已經介紹了 Next.js 是 file-based routing 的架構,在路由至其他頁面時,通常會使用到 <Link />...
前言 俗話說:「一千個人,就有一千種程式碼的寫法」,而且我們身在 JavaScript 的世界中,一段程式碼可以用各種不同的方式來表達,例如該用單引號或雙引號、...
前言 今天我想來點輕鬆的議題,是一個大家在開發專案時都會遇到的狀況。在開發時有時候資料夾結構會變得很深,想要拿到外部的檔案時以相對路徑的方式會很麻煩: impo...