iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

組裝前端開發工具箱,從 NX 入手 系列

最近剛認識了 NX 這套 monorepo 工具,就想將一直以來開發各個專案時使用到的工具做個整合,順便摸熟 monorepo 的架構,主要會以 NX + NextJS 做基礎,也想試試能不能在一個資源庫中搭配多種框架(Vue , React Native 等)。

DAY 21

Next App Router 設定 i18n

來設定 Next 專案的 i18n 功能。 Next App Router 架構納入了 React Server component ,所以要想辦法設定能夠在...

2023-09-22 ‧ 由 Jasper 分享
DAY 22

Next.js Server Component 偵測與記憶語系

稍微做個延伸,建立 Next 識別用戶預設語系跟記憶語系選擇的功能。 同樣主要參考這篇: i18n with Next.js 13 and app direct...

2023-09-23 ‧ 由 Jasper 分享
DAY 23

Next.js Client Component 偵測與記憶語系

設定完 Server Component 接著是 Client Component 安裝套件幫助找出使用者的預設語系。 pnpm add -D i18next-...

2023-09-24 ‧ 由 Jasper 分享
DAY 24

Monorpeo 架構比較 Package-based vs Integrated

NX 構成的 monorpeo 主要有兩種不同類型的結構,分別是 package-baed 跟 integrated ,這邊來簡介兩者的區別。 Package-...

2023-09-25 ‧ 由 Jasper 分享
DAY 25

NX 加入 Astro 專案

Astro 最近更新了 3.0 版本,來加到這個玩具箱裡試試看吧。 目前 NX 沒有官方支援的 Astro 擴充,雖然有社群版本的但還沒升級到 Astro 3....

2023-09-26 ‧ 由 Jasper 分享
DAY 26

Astro 集成 React 元件

Astro 的特點之一,就是可以使用各家框架的元件,像是 React, Vue, Svelte 等,能夠將不同來源的元件拼合到一頁上,在 Monorepo 的架...

2023-09-27 ‧ 由 Jasper 分享
DAY 27

NX 搭配 Laravel

目前為止加入工具箱的專案都是 javascript 框架,不曉得 NX 有沒有辦法搭配非 javascript 體系的框架。 來實驗看看吧,嘗試在 NX 中加入...

2023-09-28 ‧ 由 Jasper 分享
DAY 28

React Module Fedaration

NX 的 React 擴充有提供建立 Module Federation 架構專案的功能,來試試看。 首先簡介一下 Module Federation 架構,相...

2023-09-29 ‧ 由 Jasper 分享
DAY 29

Next.js 的 module federation 問題

研究了一下 Next.js 有沒有辦法形成 module federation 架構,簡單結論來說, App Router 的架構下還不行。 目前建構 Next...

2023-09-30 ‧ 由 Jasper 分享
DAY 30

NX 概觀整理

用了一陣子 NX 後瞭解了些這組工具的基本功能與一些限制,這邊做個整理。 指令工具幫助執行操作與建立元件 NX 提供的 executor 與 generator...

2023-10-01 ‧ 由 Jasper 分享