iT邦幫忙

nextjs相關文章
共有 149 則文章
2 Like 1 留言 5830 瀏覽
鐵人賽 Software Development DAY 30
React框架白話文運動 系列 第 30 篇

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

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

hogantech ‧ 2022-10-15
0 Like 0 留言 1428 瀏覽
鐵人賽 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 0 留言 6906 瀏覽
鐵人賽 Modern Web DAY 28
從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術 系列 第 28 篇

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

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

EasonChang ‧ 2022-10-13
0 Like 0 留言 1478 瀏覽
鐵人賽 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 留言 1777 瀏覽
鐵人賽 Modern Web DAY 24
從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術 系列 第 24 篇

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

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

EasonChang ‧ 2022-10-09
1 Like 0 留言 2696 瀏覽
鐵人賽 Modern Web DAY 23
從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術 系列 第 23 篇

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

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

EasonChang ‧ 2022-10-08
0 Like 0 留言 2240 瀏覽
鐵人賽 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 留言 1500 瀏覽
鐵人賽 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 留言 2154 瀏覽
鐵人賽 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 留言 2246 瀏覽
鐵人賽 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 留言 1825 瀏覽
鐵人賽 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 留言 1110 瀏覽
鐵人賽 Modern Web DAY 14
Full Stack Web Development 網站實作 系列 第 14 篇

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

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

tjabi ‧ 2022-09-29
0 Like 0 留言 1690 瀏覽
鐵人賽 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 留言 1263 瀏覽
鐵人賽 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 留言 2047 瀏覽
鐵人賽 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 留言 3980 瀏覽
鐵人賽 Modern Web DAY 10
從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術 系列 第 10 篇

技術 Dark Mode 深色模式支援，使用 Tailwind CSS、next-themes - Modern Next.js Blog 系列 #10

這篇我們來讓上一篇安裝完的 Tailwind CSS 支援暗黑模式（深色模式、Dark mode）。 並搭配 next-themes 管理主題切換以及偏好主題的...

EasonChang ‧ 2022-09-25
0 Like 0 留言 2046 瀏覽
鐵人賽 Modern Web DAY 6
從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術 系列 第 6 篇

技術 首頁功能實作，加入 Contentlayer 文章列表 - Modern Next.js Blog 系列 #06

讓我們使用上一篇安裝的 Contentlayer，實作首頁文章列表功能，呈現所有 Markdown 文章。 結果截圖如下： 這篇修改的程式碼如下：https...

EasonChang ‧ 2022-09-21
0 Like 0 留言 2396 瀏覽
鐵人賽 Modern Web DAY 5
從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術 系列 第 5 篇

技術 Markdown 簡介 & 安裝 ContentLayer - Modern Next.js Blog 系列 #05

這篇我們來簡介如何使用 Markdown 語法撰寫文章，以及安裝 Contentlayer 將 Markdown 檔案轉換成文章。 這篇完整程式碼改動可以在這...

EasonChang ‧ 2022-09-20
0 Like 0 留言 709 瀏覽
鐵人賽 Modern Web DAY 6
Full Stack Web Development 網站實作 系列 第 6 篇

技術 Day 6 使用Next.js - 開始 coding 一個非常簡單的 blog (1)

Setup 好 Next.js 環境後，可以開始 coding，做一個非常簡單的 blog。 首先，在 n02-blog/pages 目錄下，新增一個檔案 i...

tjabi ‧ 2022-09-21
0 Like 0 留言 3261 瀏覽
鐵人賽 Modern Web DAY 3
從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術 系列 第 3 篇

技術 將 Next.js 專案部署上 Vercel 平台 - Modern Next.js Blog 系列 #03

這篇文章會介紹 Vercel 架站平台、如何把 Next.js 專案部署上去、以及綁定 Github 實現持續部署。 內容如下： Vercel 架站平台介紹...

EasonChang ‧ 2022-09-18
0 Like 1 留言 5021 瀏覽
鐵人賽 Modern Web DAY 1
從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術 系列 第 1 篇

技術 「從零開始打造炫砲個人部落格」系列簡介 - Modern Next.js Blog 系列 #01

歡迎來到 30 天 「從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術」 系列！ 這系列我們會在 30 天...

EasonChang ‧ 2022-09-16
0 Like 0 留言 2442 瀏覽
鐵人賽 Modern Web DAY 29
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ 系列 第 29 篇

技術 #29 No-code 之旅 — 部署至 Vercel

哇 倒數一天！最近都在準備把專案推上去 production 了，大家可以看看 Next.js 整理的推上 production 之前的注意事項。我們今天來走一...

Jade ‧ 2021-10-14
1 Like 1 留言 4252 瀏覽
鐵人賽 Modern Web DAY 28
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ 系列 第 28 篇

技術 #28 No-code 之旅 — 客製化 Next.js 的錯誤頁面

嗨！因為最近系列文快要結束了，所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該注意的事項，其中一項就是...

Jade ‧ 2021-10-13
0 Like 0 留言 1663 瀏覽
鐵人賽 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
1 Like 0 留言 2572 瀏覽
鐵人賽 Modern Web DAY 26
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ 系列 第 26 篇

技術 #26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI

連假結束了Ｑ 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看！我們會用 Chakra UI 去實作 dark...

Jade ‧ 2021-10-11
0 Like 0 留言 2874 瀏覽
鐵人賽 Modern Web DAY 25
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ 系列 第 25 篇

技術 #25 No-code 之旅 — 實作 Notion 部落格 Pagination (分頁) 功能 ft. SWR

嗨大家！像昨天說的，今天會講怎麼用 SWR 實作 Notion 部落格的 pagination (分頁) 功能～ 還沒看昨天的文章的大家，可以點這裡，今天的文章...

Jade ‧ 2021-10-10
0 Like 0 留言 2545 瀏覽
鐵人賽 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
1 Like 0 留言 2869 瀏覽
鐵人賽 Modern Web DAY 23
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ 系列 第 23 篇

技術 #23 No-code 之旅 — Next.js 網站可以部署到哪裡呢？

大家～ 今天文章會也會很短Ｑ 昨天講了靜態網站可以部署到哪裡之後，今天來講 Next.js 的專案可以部署到哪？Next.js 專案基本上是用 Node.js...

Jade ‧ 2021-10-08
1 Like 0 留言 21204 瀏覽
鐵人賽 Modern Web DAY 21
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ 系列 第 21 篇

技術 #21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介

大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會...

Jade ‧ 2021-10-06
0 Like 0 留言 1696 瀏覽
鐵人賽 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
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19804 篇
完賽人數
529 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙