iT邦幫忙

nextjs相關文章
共有 107 則文章
鐵人賽 Modern Web DAY 19

技術 Day 19 - Next.js 13 App Router 動態路由 Dynamic Routes & getStaticParams()

Day 17 我們介紹了 App Router 的基本路由定義方式,簡單來說,當 /app 中的資料夾裡有 page.tsx 時,Next.js 就會以該資料夾...

鐵人賽 Modern Web DAY 17

技術 介紹 TanStackQuery

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

鐵人賽 Modern Web DAY 16

技術 Next App Router 其三

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

鐵人賽 Modern Web DAY 15

技術 Next App Router 其二

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

鐵人賽 SideProject30 DAY 1

技術 營養師不開菜單的第一天 - 為什麼要做 Link In Bio Tool?

前言 一年半前,我還是個每天在廚房走跳的營養師,除了跟廚師或阿姨打交道,就是跟廠商吵架,再接著對老師家長畢恭畢敬,職業生涯中完全沒想過這輩子會當前端工程師。在...

鐵人賽 Modern Web DAY 14

技術 Next App Router 其一

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

鐵人賽 Modern Web DAY 13

技術 部署 Vercel

把 Next.js 專案部署上 Vercel 非常簡單,註冊帳號後選擇連動的 Github 帳號,然後建立 project 選擇要部署的 Repo ,搭配 Ve...

鐵人賽 Modern Web DAY 11

技術 Day 11 - Next.js 13 App Router :什麼時候適合使用 Server Components 或 Client Components?

昨天我們介紹了 Server Components 和 Client Compnents 是什麼,這時你可能會問,所以使用 Server Components...

鐵人賽 Modern Web DAY 9

技術 Day 09 - Persistent Layout 是什麼?要怎麼在 App Router 中實踐?

昨天介紹了 App Router 的第一個優點,是能讓專案的檔案結構更加自由。今天接著來分享第二個優點:可以透過特殊檔案 layout.tsx 更簡單地實現 p...

鐵人賽 Modern Web DAY 8

技術 Day 08 - App Router 是什麼?

昨天介紹了 Next.js 13 改版三大核心的第一點 - Compiler Infrastructure 的優化,今天繼續來認識下一個重點:Rendering...

鐵人賽 Modern Web DAY 7

技術 表單工具 react-hook-form

網頁常見的功能之一就是表單,像是註冊、輸入個人資料、後臺建立管理資料等都需要有表單輸入的功能,另外最好還有前端能事先對表單的輸入內容進行檢查,通過後才發給後端。...

鐵人賽 Modern Web DAY 6

技術 整合 MUI 跟 Tailwind 樣式設定

MUI 有自己的樣式主題系統,tailwind 也有,為了防止之後再套用樣式的時候兩邊出現偏差,要來想辦法同步兩邊的設定。 首先建立好 MUI 的自訂主題。 /...

鐵人賽 Modern Web DAY 4

技術 添加 Storybook

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

鐵人賽 Modern Web DAY 3

技術 架設元件庫

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

鐵人賽 Modern Web DAY 2

技術 加入元件庫

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

鐵人賽 Modern Web DAY 1

技術 建立 NX 專案

開發累積了些經驗後已經有一些用著趁手的套件,也做了一些將這些套件封裝後的工具,開了新專案的時候可以用 fork 或是將工具發布到 npm 上的方式來重用這些工具...

技術 Nextjs: Hydration failed because the initial UI does not match what was rendered on the server

這是Reactv18開始有的問題,官方描述: While rendering your application, there was a difference...

鐵人賽 Software Development DAY 30
React框架白話文運動 系列 第 30

技術 React白話文運動30-結尾

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 29

技術 在 Next.js Contentlayer blog 實作舊路徑轉址 - Modern Next.js Blog 系列 #29

這是本系列最後一篇實作文,最後來實作一個微小但重要的功能:舊路徑轉址! 這篇修改的程式碼如下:https://github.com/Kamigami55/ne...

鐵人賽 Modern Web DAY 28

技術 使用 next-i18next 實作中英文多語系 - Modern Next.js Blog 系列 #28

讓我們來完成這個系列最後一塊重點功能:「i18next 中英文多語系支援」,讓部落格走向國際! 最終效果如下: 這篇修改的程式碼如下:https://g...

鐵人賽 Modern Web DAY 27

技術 在 kbar Command Palette 實作文章搜尋 - Modern Next.js Blog 系列 #27

這是「Modern Blog 30 天」系列第 27 篇文章。 上一篇加完了 Command Palette 指令面板,這篇我們來繼續擴充它,讓 Command...

鐵人賽 Modern Web DAY 24

技術 在 MDX 文章側邊加入目錄 - Modern Next.js Blog 系列 #24

上一篇加完了換頁進度條,這篇我們繼續加入另一個炫砲且實用的功能:「文章側邊目錄」,讓讀者一目瞭然文章結構! 最終效果如下: 這篇修改的程式碼如下: http...

鐵人賽 Modern Web DAY 23

技術 使用 nprogress 加入換頁進度條 - Modern Next.js Blog 系列 #23

這是「Modern Blog 30 天」系列第 23 篇文章。 上一篇優化完了內文圖片效能,這篇我們繼續來改善讀者體感效能,使用 nprogress 來加入換頁...

鐵人賽 Modern Web DAY 22

技術 圖片效能最佳化,使用 Next.js Image、plaiceholder、客製 MDX 元件 - Modern Next.js Blog 系列 #22

網站效能瓶頸通常是圖片讀取速度太慢。為了提升讀者體驗、和 SEO 分數,這一篇我們來最佳化內文圖片效能! 這篇修改的程式碼如下:https://github....

鐵人賽 Modern Web DAY 21

技術 強化內文連結換頁速度、加入外部連結 icon - Modern Next.js Blog 系列 #21

TL;DR 這是「Modern Blog 30 天」系列第 21 篇文章,上一篇我們在內文小標題加入 anchor 錨點了,這篇我們會來修改內文 CustomL...

鐵人賽 Modern Web DAY 19

技術 使用 feed 生成 RSS Feed - Modern Next.js Blog 系列 #19

TL;DR 這是「Modern Blog 30 天」系列第 19 篇文章,上一篇我們做完 Sitemap 生成了,這篇接著來做非常相似的 RSS Feed 生成...

鐵人賽 Modern Web DAY 16

技術 加入程式碼區塊「複製按鈕」,使用客製化 MDX 元件 - Modern Next.js Blog 系列 #16

上一篇我們讓程式碼區塊顯示了標題,這篇我們繼續讓它更好用,來加入「複製按鈕」! 結果截圖如下: 這篇修改的程式碼如下:https://github.com...

鐵人賽 Modern Web DAY 15

技術 加入程式碼區塊標題,使用 rehype-code-titles - Modern Next.js Blog 系列 #15

上一篇我們讓程式碼區塊支援 Syntax Highlighting 了,這篇我們來讓它多出區塊標題! 這篇修改的程式碼如下:https://github.co...

鐵人賽 Modern Web DAY 14

技術 Day 14 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (5) -- 讀取 Supabase 資料

讀取 Supabase 資料首先安裝 supabase-js: npm i @supabase/supabase-js 接著,在根目錄,建立 client.j...