技術 添加 Storybook

現在是把元件從專案中獨立出來了，但還只能從專案上去看到元件所呈現的結果，為了之後開發元件方便，來給元件庫加上 storybook 吧。 可以直接將剛剛建好的...

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

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

技術 架設元件庫

目前的元件還放在 ironman-nextjs 這個 app 底下，也只有這個 app 能取用到這些元件，為了讓之後的專案可以一起運用這些元件，接下來要把他們抽...

技術 加入元件庫

首先是元件庫，目前用的最順手的是 MUI ，先把會用到的部分安裝。 pnpm add @mui/material @emotion/react @emotion...

技術 Next App Router 其二

繼續介紹一些除了 page 以外 App Router 會識別的特殊文件名稱。 loading 現在 Next.js 預設 page 都是 Server Com...

技術 [next 13] - server component

昨天介紹了 client component，今天要介紹 next 13 推出的新功能: server component。server component 可...

技術 [next 13] - data fetch

今天要接著介紹網頁開發很重要的一環， data fetch。很多時候我們開發功能時，往往需要從外部拿取資料，要如何拿取資料就是很重要的問題。這一篇會來介紹如何在...

技術 Next App Router 其三

介紹 App Router 其他比較奇巧型的路由(?)定義。 Parallel Router 除了定義 page 作為路由的主要頁面外，也可以定義額外的頁面區塊...

技術 React 走出新手村 — Rick and Morty練習(II)

Dynamic Routes 我們今天接續的做每個角色自己的頁面，來理解 Dynamic Routes 的實作層面。這部分我們可以先借一下 Next 官方的範例...

技術 #21 面向使用者的第一線：Authentication 整合

在我們整合 API 的之前，要先來串接之前設定好的 Firebase Auth 的設定，所以要先製作簡單的登入與註冊帳號頁面。這樣在操作特定的 API 時才可...

技術 [next 13] - Client Component

今天要來介紹 client component 的用法，其實 client component 就是過去 next 12 常用的 component，功能上大同...

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

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

技術 介紹 TanStackQuery

來介紹最近喜歡的 API 串接工具 TanStackQuery。 主要用來解決幾個問題： 管理 API 前端快取，包含自動重取過期的快取，以及更新資料後手動更...

技術 Next App Router 其一

開始來仔細研究 Next.js 13 的 App router 功能。 首先是基本的定義方式，route 結構是根據 app 目錄底下的內容去定義的，會跟據資...

技術 [Day 19] 作業4：Static Single Page View Implementation - 前端Code review

Static Single Page View Implementation - 前端Code review 由於前端只需要刻板，這邊的code review就...

技術 [Day 17] 作業4：Bitcoin Trading Bot Design & Static Single Page View Implementation

Bitcoin Trading Bot Design & Static Single Page View Implementation 這個是我做過最有...

技術 [Day 18] 作業4：Static Single Page View Implementation - 前端專案review

Static Single Page View Implementation - 前端專案review 這個作業分為前端刻板與系統設計，今天我們先來看前端(Re...