設定完 Server Component 接著是 Client Component 安裝套件幫助找出使用者的預設語系。 pnpm add -D i18next-...
稍微做個延伸，建立 Next 識別用戶預設語系跟記憶語系選擇的功能。 同樣主要參考這篇： i18n with Next.js 13 and app direct...
來設定 Next 專案的 i18n 功能。 Next App Router 架構納入了 React Server component ，所以要想辦法設定能夠在...
在營養教育的時候常會介紹整個餐點製作的過程，稱為「農場到餐桌」，我們的 code 就像食材，確定了網站的基礎結構和用戶體驗；而 Rendering 則像烹飪技巧...
NX 有提供擴充工具幫助快速生成專案或是元件庫的架構，像是： pnpm exec nx generate @nx/next:application 利用擴充工...
網站如餐廳，提供多樣「數位料理」供使用者選擇。在這虛擬餐廳，Navigation 就像精心排列的菜單，列舉所有「餐點」，助使用者快速找到所需。而當使用者做出選...
今天要來介紹 next 13 推出的一個重要概念: app router，這是一個全新的 file-base system，取代原有的 pages router...
時雨
‧
2023-09-20
超商有三種起司三明治，Next.js 則有三種 Route，Dynamic Routes、Parallel Routes、Intercepting Routes...
今天我們要來講如何做 Next 的環境建置，以及為 Next 的專案做技術選型，未來的程式範例以及專案實作都會以這個技術選型基礎為準喔！ 環境建置 Node.j...
時雨
‧
2023-09-19
升版後的 Next Next 在今年升版到 13.4，並增加了許多新的功能，同時也大幅翻轉了原先的寫法。 總的來說，新版本的 Next 將 data fetch...
時雨
‧
2023-09-18
說到為什麼要用 Nextjs 來做主要的開發框架，我覺得可以透過我的產品目的及我的開發模式來決定: 我的專案是個公開性的網頁，並且希望用戶可以透過我的產品提...
我們人體的骨架是支撐我們人體重要的器官，它不僅提供結構，使我們能夠站立和行動還有保護內臟，我覺得專案架構就如同我們的骨架，如果沒有好好的建立，讓所有功能和模組都...
今天會介紹一下 Next 是什麼、為什麼要使用 Next，來幫助一些沒什麼接觸 Next 的朋友快速認識什麼是 Next。 Next 出現背景 如同上一篇講的，...
時雨
‧
2023-09-17
介紹 App Router 其他比較奇巧型的路由(?)定義。 Parallel Router 除了定義 page 作為路由的主要頁面外，也可以定義額外的頁面區塊...
今天營養師除了不開菜單，也不介紹保健食品或健康宣導，而是來專案介紹，實作作品是一個 Link in Bio Tool 的 0 到 1 開發，會依據專案背景、目的...
繼續介紹一些除了 page 以外 App Router 會識別的特殊文件名稱。 loading 現在 Next.js 預設 page 都是 Server Com...
前言 隔了一年，我又來鐵人賽挑戰自我啦！去年寫的是 React 的介紹，實際進入業界後發現 React 的生態系比自己想像的更廣更深，還有很多東西可以深挖。這次...
時雨
‧
2023-09-16
開始來仔細研究 Next.js 13 的 App router 功能。 首先是基本的定義方式，route 結構是根據 app 目錄底下的內容去定義的，會跟據資...
了解如何使用 Client Components 和 Server Components 後，我們接著來認識 App Router 的另一大重點 - Routi...
把 Next.js 專案部署上 Vercel 非常簡單，註冊帳號後選擇連動的 Github 帳號，然後建立 project 選擇要部署的 Repo ，搭配 Ve...
前兩天介紹了 Rendering Infrastructure 優化的其中兩個項目 - 新的路由架構 App Router 與使用 layout.tsx 更簡單...
大家好，我是 S.C，八月初偶然在 Youtube 上看到一段影片，提到學習分成三層次 - 自己會、能教會他人、能設計教材，看完蠻有感觸的，因為自踏入程式開發的...
這是Reactv18開始有的問題，官方描述: While rendering your application, there was a difference...
9 | <Post id: {router.query.id}: ^`---- 這行有錯修正如下 謝謝網友 stevelin666
這是「從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術」系列第 30 篇文章。 在這 30 天裡，我們一起...
這是本系列最後一篇實作文，最後來實作一個微小但重要的功能：舊路徑轉址！ 這篇修改的程式碼如下：https://github.com/Kamigami55/ne...
讓我們來完成這個系列最後一塊重點功能：「i18next 中英文多語系支援」，讓部落格走向國際！ 最終效果如下： 這篇修改的程式碼如下：https://g...
這是「Modern Blog 30 天」系列第 27 篇文章。 上一篇加完了 Command Palette 指令面板，這篇我們來繼續擴充它，讓 Command...
這是「Modern Blog 30 天」系列第 26 篇文章。 上一篇加完了留言系統，這篇我們繼續加入另一個酷炫功能：「Command Palette 指令面板...
這是「Modern Blog 30 天」系列第 25 篇文章。 上一篇加完了文章側邊目錄，這篇我們再來加入另一個炫砲且實用的功能：留言系統！ 最終效果如下：...
Jasper
ysl0628
S.C
EasonChang
iThome鐵人賽
看影片追技術