來設定 Next 專案的 i18n 功能。 Next App Router 架構納入了 React Server component ，所以要想辦法設定能夠在...
今天要來介紹 client component 的用法，其實 client component 就是過去 next 12 常用的 component，功能上大同...
時雨
‧
2023-09-21
NX 有提供擴充工具幫助快速生成專案或是元件庫的架構，像是： pnpm exec nx generate @nx/next:application 利用擴充工...
關於渲染的構想 pre-rendering 一直是 Next.js 的核心思想，他們將其分為兩種實作方法，一個是 Rendering，也就是一般的渲染概念，另一...
昨天最後提到，Next 有提供幾個「功能性路由」，可以在不影響 URL 的前提下，享受 Next 針對提升路由開發體驗的機制。今天來分享第一個情境： 分類路由...
既然 Next.js 內建後端環境，除了處理 Pre-Rendering 和 Server Components 外，還有其他功能可以善用 server 來處理...
動機 主要還是想順著開頭篇章繼續補完 React server component，所以接下來就是會碰到 Next 這個框架，因為他與 React18 合作開發...
Client-side navigation 一直是 SPA ( Single Page Application ) 的一大特色。可以讓使用者拜訪其他頁面時，瀏...
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 全端轉職攻略：從專案規劃、畫面設計、資安到 SEO，挑戰一人 Side Project (iThom...
開始來仔細研究 Next.js 13 的 App router 功能。 首先是基本的定義方式，route 結構是根據 app 目錄底下的內容去定義的，會跟據資...
把 Next.js 專案部署上 Vercel 非常簡單，註冊帳號後選擇連動的 Github 帳號，然後建立 project 選擇要部署的 Repo ，搭配 Ve...
假如我們今天要做一個 dashboard，頁面上包含全域共用的 Header，以及 數據分析 和 團隊介紹 兩個區塊，大致 layout 如下： 很直覺地，可能...
昨天我們介紹了 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...
Jasper
LucianoLee
S.C
ysl0628
hogantech
EasonChang
iThome鐵人賽
看影片追技術