大家好，我是一宵三筵近期練習了將NextJS的小專案打包成靜態檔，透過CICD放到GitHub Pages上的操作但因為卡了一些坑弄了一整個晚上，因此來分享分享...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...
在我們整合 API 的之前，要先來串接之前設定好的 Firebase Auth 的設定，所以要先製作簡單的登入與註冊帳號頁面。這樣在操作特定的 API 時才可...
Static Single Page View Implementation - 前端Code review 由於前端只需要刻板，這邊的code review就...
Static Single Page View Implementation - 前端專案review 這個作業分為前端刻板與系統設計，今天我們先來看前端(Re...
Bitcoin Trading Bot Design & Static Single Page View Implementation 這個是我做過最有...
Dynamic Routes 我們今天接續的做每個角色自己的頁面，來理解 Dynamic Routes 的實作層面。這部分我們可以先借一下 Next 官方的範例...
時間過得很快，也來到本系列文章的倒數第二篇。 昨天介紹了 Next 快取機制的前兩層 - Data Cache 和 Request Memoization。兩者...
實作練習 經過前面的介紹之後，相信大家應該有基礎的理解和認知了，接下來我們一樣透過 Rick and Morty API 來練習如何在 app router 下...
假如有閱讀前 27 天文章的讀者，可能會發現快取 ( Caching ) 這個詞時常出現在文章中，像是 Day 03 提到 ISR 會快取渲染結果；Day11...
App Router 那我們來說說 app router 的機制吧！App Router 是 Next 13 新介紹的一種 routing 方式，與之相對過去的...
昨天有提到，根據統計，圖片和 JavaScript 為整體網頁檔案大小佔比的前兩名，兩者加起來佔了近九成。 認識 Next 針對圖片優化推出的 componen...
緣起 官方介紹影片連結，我也是做這個主題才知道，原來這個概念已經存在那麼久了，那我們快速講解他的成因吧！ 影片整理 目的Dan Abramov 說出了我們前端開...
根據 Web Almanac 2022 年的統計，網頁的圖片大小佔整體網頁檔案大小，中位數超過 6 成。而 JavaScipt 則佔近 3 成。(圖片來源：ht...
SSR Next 的 SSR（Server-Side Rendering）的概念是在每個使用者請求時動態產生頁面內容，而不是提前產生靜態 HTML 頁面，這樣頁...
ISR概念 ISR（Incremental Static Regeneration）是 Next.js 在（SSG）的基礎上做出的改進方法，讓頁面在構成之後根據...
今天要接著介紹網頁開發很重要的一環， data fetch。很多時候我們開發功能時，往往需要從外部拿取資料，要如何拿取資料就是很重要的問題。這一篇會來介紹如何在...
時雨
‧
2023-09-24
關於渲染的構想 pre-rendering 一直是 Next.js 的核心思想，他們將其分為兩種實作方法，一個是 Rendering，也就是一般的渲染概念，另一...
設定完 Server Component 接著是 Client Component 安裝套件幫助找出使用者的預設語系。 pnpm add -D i18next-...
前面做了關於 client component 以及 server component 的基本介紹，這一篇來介紹一下他們背後的 render 機制。 新的 re...
時雨
‧
2023-09-23
稍微做個延伸，建立 Next 識別用戶預設語系跟記憶語系選擇的功能。 同樣主要參考這篇： i18n with Next.js 13 and app direct...
既然 Next.js 內建後端環境，除了處理 Pre-Rendering 和 Server Components 外，還有其他功能可以善用 server 來處理...
動機 主要還是想順著開頭篇章繼續補完 React server component，所以接下來就是會碰到 Next 這個框架，因為他與 React18 合作開發...
昨天介紹了 client component，今天要介紹 next 13 推出的新功能: server component。server component 可...
時雨
‧
2023-09-22
來設定 Next 專案的 i18n 功能。 Next App Router 架構納入了 React Server component ，所以要想辦法設定能夠在...
假如我們今天要做一個 dashboard，頁面上包含全域共用的 Header，以及 數據分析 和 團隊介紹 兩個區塊，大致 layout 如下： 很直覺地，可能...
今天要來介紹 client component 的用法，其實 client component 就是過去 next 12 常用的 component，功能上大同...
時雨
‧
2023-09-21
NX 有提供擴充工具幫助快速生成專案或是元件庫的架構，像是： pnpm exec nx generate @nx/next:application 利用擴充工...
昨天最後提到，Next 有提供幾個「功能性路由」，可以在不影響 URL 的前提下，享受 Next 針對提升路由開發體驗的機制。今天來分享第一個情境： 分類路由...
Client-side navigation 一直是 SPA ( Single Page Application ) 的一大特色。可以讓使用者拜訪其他頁面時，瀏...
一宵三筵
Bill
Moscle.dev
LucianoLee
S.C
Jasper
iThome鐵人賽
看影片追技術