iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 1401 瀏覽

鐵人賽 Modern Web DAY 24

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 24 篇

技術 #24 No-code 之旅 — 在 Next.js 專案中實作 API

嗨大家！今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係，才發現在 client-side 呼叫會遇到 CORS 問題。這...

Jade ‧ 2021-10-09

0 Like 0 留言 1344 瀏覽

鐵人賽 Modern Web DAY 11

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 11 篇

技術全站樣式切版 - Modern Next.js Blog 系列 #11

TL;DR 這是「Modern Blog 30 天」系列第 11 篇文章，上一篇我們在 Next.js blog 搭配 Tailwind CSS 加入了「暗黑模...

EasonChang ‧ 2022-09-26

0 Like 0 留言 1234 瀏覽

鐵人賽 Modern Web DAY 18

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 18 篇

技術 #18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK

嗨大家～像昨天文章裡提的，這專案會採用 Notion 來當 CMS (包含資料庫)，意思是部落格文章的新增編輯刪除都會發生在 Notion 裡。所以，這專案需...

Jade ‧ 2021-10-03

0 Like 0 留言 1111 瀏覽

鐵人賽 Modern Web DAY 12

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 12 篇

技術 #12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser

嗨嗨嗨！昨天使用 Notion SDK 顯示我的 Notion page 裡面的內容，可以在這裡看看喔。那今天新增了一個新的頁面，使用 RSS 顯示iT邦幫忙系...

Jade ‧ 2021-09-27

1 Like 1 留言 1076 瀏覽

技術【Github Pages & NextJS】GitHub Action CICD+ NextJS靜態打包部署GitHub Pages 步驟教學＆踩坑紀錄

大家好，我是一宵三筵近期練習了將NextJS的小專案打包成靜態檔，透過CICD放到GitHub Pages上的操作但因為卡了一些坑弄了一整個晚上，因此來分享分享...

一宵三筵 ‧ 2024-03-04

0 Like 0 留言 1064 瀏覽

鐵人賽 Modern Web DAY 27

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 27 篇

技術 #27 No-code 之旅 — 客製化 Favicon ～

嗨嗨！今天來講一下怎麼設定網站的 favicon！還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔！還不知道什麼是 favicon...

Jade ‧ 2021-10-12

0 Like 0 留言 1062 瀏覽

鐵人賽 Modern Web DAY 22

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 22 篇

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

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

EasonChang ‧ 2022-10-07

0 Like 0 留言 1024 瀏覽

鐵人賽 Modern Web DAY 8

深入淺出，完整認識 Next.js 13 ！系列第 8 篇

技術 Day 08 - App Router 是什麼？

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

S.C ‧ 2023-09-08

0 Like 0 留言 1023 瀏覽

鐵人賽 Modern Web DAY 28

深入淺出，完整認識 Next.js 13 ！系列第 28 篇

技術 Day 28 - Next.js 13 的快取機制 ( 一 ) - Data Cache & Request Memoization

假如有閱讀前 27 天文章的讀者，可能會發現快取 ( Caching ) 這個詞時常出現在文章中，像是 Day 03 提到 ISR 會快取渲染結果；Day11...

S.C ‧ 2023-09-28

1 Like 0 留言 992 瀏覽

鐵人賽 Modern Web DAY 11

深入淺出，完整認識 Next.js 13 ！系列第 11 篇

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

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

S.C ‧ 2023-09-11

0 Like 0 留言 958 瀏覽

鐵人賽 Modern Web DAY 20

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 20 篇

技術 #20 No-code 之旅 — Analytics ft. Google Analytics & Splitbee

嗨！今天的主題是加 analytics 到網站 (專案) 裡～講到 analytics，大家通常會想到 Google Analytics，所以今天會分享怎麼加...

Jade ‧ 2021-10-05

1 Like 0 留言 957 瀏覽

鐵人賽 Modern Web DAY 9

深入淺出，完整認識 Next.js 13 ！系列第 9 篇

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

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

S.C ‧ 2023-09-09

0 Like 0 留言 933 瀏覽

鐵人賽 Modern Web DAY 16

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 16 篇

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

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

EasonChang ‧ 2022-10-01

0 Like 0 留言 920 瀏覽

鐵人賽 Modern Web DAY 19

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 19 篇

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

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

EasonChang ‧ 2022-10-04

0 Like 0 留言 919 瀏覽

鐵人賽 Modern Web DAY 24

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 24 篇

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

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

EasonChang ‧ 2022-10-09

0 Like 0 留言 877 瀏覽

鐵人賽 Modern Web DAY 17

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 17 篇

技術 #17 No-code 之旅 — 專案架構

今天先建立專案，還有開始慢慢地定架構，裝 dependencies ～ Setup 這專案想要用 Next.js + TypeScript 寫，所以用下面指令...

Jade ‧ 2021-10-02

0 Like 0 留言 876 瀏覽

技術 Build a guestbook with Next.js, NextAuth and Supabase (supabase + nextauth 開發auth登入留言板)

Stack Next.js as a framework NextAuth (Authentication for Next.js) Supabase (gu...

eliaschen ‧ 2023-02-11

0 Like 1 留言 858 瀏覽

技術 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...

AndrewYEE ‧ 2023-02-12

0 Like 1 留言 843 瀏覽

鐵人賽 Modern Web DAY 20

深入淺出，完整認識 Next.js 13 ！系列第 20 篇

技術 Day 20 - Next.js 13 App Router 路由切換：<Link> & useRouter

Client-side navigation 一直是 SPA ( Single Page Application ) 的一大特色。可以讓使用者拜訪其他頁面時，瀏...

S.C ‧ 2023-09-20

0 Like 0 留言 820 瀏覽

鐵人賽 Modern Web DAY 29

深入淺出，完整認識 Next.js 13 ！系列第 29 篇

技術 Day 29 - Next.js 13 的快取機制 ( 二 ) - Full Route Cache & Router Cache

時間過得很快，也來到本系列文章的倒數第二篇。昨天介紹了 Next 快取機制的前兩層 - Data Cache 和 Request Memoization。兩者...

S.C ‧ 2023-09-29

0 Like 0 留言 819 瀏覽

鐵人賽 Modern Web DAY 13

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 13 篇

技術文章內頁樣式切版 - Modern Next.js Blog 系列 #13

TL;DR 這是「Modern Blog 30 天」系列第 13 篇文章，上一篇我們使用 Tailwind CSS 美化了首頁樣式，這篇我們會繼續美化文章內頁樣...

EasonChang ‧ 2022-09-28

0 Like 0 留言 804 瀏覽

鐵人賽 Modern Web DAY 21

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 21 篇

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

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

EasonChang ‧ 2022-10-06

0 Like 0 留言 787 瀏覽

鐵人賽 Modern Web DAY 15

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 15 篇

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

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

EasonChang ‧ 2022-09-30

0 Like 0 留言 770 瀏覽

鐵人賽 Modern Web DAY 29

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 29 篇

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

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

EasonChang ‧ 2022-10-14

0 Like 1 留言 760 瀏覽

鐵人賽 Modern Web DAY 23

深入淺出，完整認識 Next.js 13 ！系列第 23 篇

技術 Day 23 - 再多利用 Server 一點點：Route Handler & Server Actions

既然 Next.js 內建後端環境，除了處理 Pre-Rendering 和 Server Components 外，還有其他功能可以善用 server 來處理...

S.C ‧ 2023-09-23

0 Like 0 留言 746 瀏覽

鐵人賽 Modern Web DAY 13

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 13 篇

技術 [Day 13]每天前進一點應該也是進步吧?(前端篇)

挑戰目標: MockNative Camp 今天我們來整理昨天沒有弄好的footer右邊的部分，這是我們的目標昨天完成的今天完成的今天決定另闢蹊徑到uxwi...

Moscle.dev ‧ 2021-09-28

0 Like 0 留言 740 瀏覽

鐵人賽 Modern Web DAY 27

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 27 篇

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

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

EasonChang ‧ 2022-10-12

0 Like 0 留言 728 瀏覽

鐵人賽 Modern Web DAY 12

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 12 篇

技術首頁樣式切版 - Modern Next.js Blog 系列 #12

TL;DR 這是「Modern Blog 30 天」系列第 12 篇文章，上一篇我們使用 Tailwind CSS 美化了 navbar, footer 等全站...

EasonChang ‧ 2022-09-27

0 Like 0 留言 714 瀏覽

鐵人賽 Modern Web DAY 26

深入淺出，完整認識 Next.js 13 ！系列第 26 篇

技術 Day 26 - 圖片優化：next/image

根據 Web Almanac 2022 年的統計，網頁的圖片大小佔整體網頁檔案大小，中位數超過 6 成。而 JavaScipt 則佔近 3 成。(圖片來源：ht...

S.C ‧ 2023-09-26

0 Like 0 留言 653 瀏覽

鐵人賽 Modern Web DAY 6

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 6 篇

技術 [Day 6]中秋時在做什麼，有沒有空，可以幫想標題嗎(前端篇)

今天來實作Navite Camp的Nav，看官們可以點網址去看他的效果，因為沒有時間，滑鼠移動到各tab時下面橘色border會滑順的移動，這個暫時沒時間去實作...

Moscle.dev ‧ 2021-09-21

技術 #24 No-code 之旅 — 在 Next.js 專案中實作 API

技術 全站樣式切版 - Modern Next.js Blog 系列 #11