Day 17 我們介紹了 App Router 的基本路由定義方式,簡單來說,當 /app 中的資料夾裡有 page.tsx 時,Next.js 就會以該資料夾...
來介紹最近喜歡的 API 串接工具 TanStackQuery。 主要用來解決幾個問題: 管理 API 前端快取,包含自動重取過期的快取,以及更新資料後手動更...
介紹 App Router 其他比較奇巧型的路由(?)定義。 Parallel Router 除了定義 page 作為路由的主要頁面外,也可以定義額外的頁面區塊...
繼續介紹一些除了 page 以外 App Router 會識別的特殊文件名稱。 loading 現在 Next.js 預設 page 都是 Server Com...
前言 一年半前,我還是個每天在廚房走跳的營養師,除了跟廚師或阿姨打交道,就是跟廠商吵架,再接著對老師家長畢恭畢敬,職業生涯中完全沒想過這輩子會當前端工程師。在...
開始來仔細研究 Next.js 13 的 App router 功能。 首先是基本的定義方式,route 結構是根據 app 目錄底下的內容去定義的,會跟據資...
把 Next.js 專案部署上 Vercel 非常簡單,註冊帳號後選擇連動的 Github 帳號,然後建立 project 選擇要部署的 Repo ,搭配 Ve...
昨天我們介紹了 Server Components 和 Client Compnents 是什麼,這時你可能會問,所以使用 Server Components...
昨天介紹了 App Router 的第一個優點,是能讓專案的檔案結構更加自由。今天接著來分享第二個優點:可以透過特殊檔案 layout.tsx 更簡單地實現 p...
昨天介紹了 Next.js 13 改版三大核心的第一點 - Compiler Infrastructure 的優化,今天繼續來認識下一個重點:Rendering...
網頁常見的功能之一就是表單,像是註冊、輸入個人資料、後臺建立管理資料等都需要有表單輸入的功能,另外最好還有前端能事先對表單的輸入內容進行檢查,通過後才發給後端。...
MUI 有自己的樣式主題系統,tailwind 也有,為了防止之後再套用樣式的時候兩邊出現偏差,要來想辦法同步兩邊的設定。 首先建立好 MUI 的自訂主題。 /...
現在是把元件從專案中獨立出來了,但還只能從專案上去看到元件所呈現的結果,為了之後開發元件方便,來給元件庫加上 storybook 吧。 可以直接將剛剛建好的...
目前的元件還放在 ironman-nextjs 這個 app 底下,也只有這個 app 能取用到這些元件,為了讓之後的專案可以一起運用這些元件,接下來要把他們抽...
首先是元件庫,目前用的最順手的是 MUI ,先把會用到的部分安裝。 pnpm add @mui/material @emotion/react @emotion...
開發累積了些經驗後已經有一些用著趁手的套件,也做了一些將這些套件封裝後的工具,開了新專案的時候可以用 fork 或是將工具發布到 npm 上的方式來重用這些工具...
這是Reactv18開始有的問題,官方描述: While rendering your application, there was a difference...
Stack Next.js as a framework NextAuth (Authentication for Next.js) Supabase (gu...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
這是本系列最後一篇實作文,最後來實作一個微小但重要的功能:舊路徑轉址! 這篇修改的程式碼如下:https://github.com/Kamigami55/ne...
讓我們來完成這個系列最後一塊重點功能:「i18next 中英文多語系支援」,讓部落格走向國際! 最終效果如下: 這篇修改的程式碼如下:https://g...
這是「Modern Blog 30 天」系列第 27 篇文章。 上一篇加完了 Command Palette 指令面板,這篇我們來繼續擴充它,讓 Command...
上一篇加完了換頁進度條,這篇我們繼續加入另一個炫砲且實用的功能:「文章側邊目錄」,讓讀者一目瞭然文章結構! 最終效果如下: 這篇修改的程式碼如下: http...
這是「Modern Blog 30 天」系列第 23 篇文章。 上一篇優化完了內文圖片效能,這篇我們繼續來改善讀者體感效能,使用 nprogress 來加入換頁...
網站效能瓶頸通常是圖片讀取速度太慢。為了提升讀者體驗、和 SEO 分數,這一篇我們來最佳化內文圖片效能! 這篇修改的程式碼如下:https://github....
TL;DR 這是「Modern Blog 30 天」系列第 21 篇文章,上一篇我們在內文小標題加入 anchor 錨點了,這篇我們會來修改內文 CustomL...
TL;DR 這是「Modern Blog 30 天」系列第 19 篇文章,上一篇我們做完 Sitemap 生成了,這篇接著來做非常相似的 RSS Feed 生成...
上一篇我們讓程式碼區塊顯示了標題,這篇我們繼續讓它更好用,來加入「複製按鈕」! 結果截圖如下: 這篇修改的程式碼如下:https://github.com...
上一篇我們讓程式碼區塊支援 Syntax Highlighting 了,這篇我們來讓它多出區塊標題! 這篇修改的程式碼如下:https://github.co...
讀取 Supabase 資料首先安裝 supabase-js: npm i @supabase/supabase-js 接著,在根目錄,建立 client.j...