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

1 Like 0 留言 17242 瀏覽

鐵人賽 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

3 Like 0 留言 15439 瀏覽

鐵人賽 Modern Web DAY 14

前端工程師一起來種一棵後端技能樹吧！系列第 14 篇

技術 [Day 14] Server-Side-Rendering - (1)

最近在 Frontend 技術圈裡，Server-Side-Rendering（SSR）可說是一個越來越火熱的概念，剛好現在工作上的架構就是使用 Next.j...

莫力全 Kyle Mo ‧ 2020-09-27 ‧團隊不要搶我隊友

0 Like 0 留言 11289 瀏覽

徵才 [台北] Web Application Developer

新場景股份有限公司為台灣第一家以網路垂直領域意見領袖（a.k.a 網紅）作為標籤的快銷品公司，公司成立於 2019 年，為新媒體網紅解決方案提供方 PressP...

Arco ‧ 2021-04-15

1 Like 0 留言 9139 瀏覽

鐵人賽 Modern Web DAY 15

前端工程師一起來種一棵後端技能樹吧！系列第 15 篇

技術 [Day 15] Server-Side-Rendering - (2) feat. Next.js

前一天介紹了 SSR 基本概念，今天則是要介紹 React 最有名的 SSR 框架：Next.js。今天不是要來講 Next.js 怎麼使用，畢竟網路上學習資...

莫力全 Kyle Mo ‧ 2020-09-28 ‧團隊不要搶我隊友

1 Like 0 留言 8717 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 #06 No-code 之旅 — 用 Next.js 解決前後端？API Routes 簡介

連假最後一天！分享了一些關於 Next.js 這個框架，雖然他是 React 的框架，可是你們知道嗎？Next.js 也可以同時實作後端喔！沒錯，前後端全包～...

Jade ‧ 2021-09-21

0 Like 0 留言 8674 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 #05 No-code 之旅 — Next.js 的 Pages 與 Routing

嗨嗨嗨！昨天看完怎麼抓取資料的方式會影響到網頁的渲染模式之後，今天的主題是 Next.js 的 Pages 與 Routing。Next.js 的 routin...

Jade ‧ 2021-09-20

0 Like 0 留言 6412 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 #13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

今天來點不一樣的！來講一個我最近常用的 React UI component library，就是 Chakra UI～講到 React，很多人會想到 Mat...

Jade ‧ 2021-09-28

2 Like 1 留言 5661 瀏覽

鐵人賽 Software Development DAY 30

React框架白話文運動系列第 30 篇

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

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

hogantech ‧ 2022-10-15

0 Like 0 留言 4933 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

EasonChang ‧ 2022-10-13

3 Like 1 留言 4726 瀏覽

鐵人賽 SideProject30 DAY 1

營養師不開菜單要用 Next.js 13 寫全端系列第 1 篇

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

本系列文已改編出版為『營養師不開菜單後的 Next.js 全端轉職攻略：從專案規劃、畫面設計、資安到 SEO，挑戰一人 Side Project (iThom...

ysl0628 ‧ 2023-09-16 ‧團隊所以隊名要叫什麼

0 Like 0 留言 4241 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 #09 No-code 之旅 — 怎麼在 Client-side 抓取資料？SWR 簡介

安安！前幾天講了怎麼在專案裡用些 data fetching functions 做 pre-rendering。不過如果想要直接在 client-side 抓...

Jade ‧ 2021-09-24

0 Like 1 留言 3786 瀏覽

鐵人賽 Modern Web DAY 1

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

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

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

EasonChang ‧ 2022-09-16

1 Like 1 留言 3298 瀏覽

鐵人賽 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

1 Like 0 留言 3091 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 #08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

大家好！昨天實作了小小專案，也寫了一篇短短的介紹文，那今天跟大家分享怎麼用 Next.js 的各種 data fetching functions 串 API...

Jade ‧ 2021-09-23

0 Like 0 留言 3090 瀏覽

鐵人賽 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 1 留言 2642 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 #04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching

嗨大家！昨天跟大家分享了四種網頁渲染方式，那今天來講講該怎麼用 Next.js 實作～在 Next.js 裡，抓取資料的方式會影響到渲染方式。上一篇提到 Ne...

Jade ‧ 2021-09-19

0 Like 0 留言 2629 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 #11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK

哈囉！昨天使用 SWR 實作了一個小功能，讓使用者可以列出某 Github user 的所有公開 repository～今天用 Notion SDK 新增了一...

Jade ‧ 2021-09-26

0 Like 0 留言 2562 瀏覽

鐵人賽 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 0 留言 2559 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 #07 簡介篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

看了好幾天的 Next.js 介紹，是不是想要開始做個小專案，試試 Next.js 呢？我今天做了小小 project 使用 Next.js 的各種 data...

Jade ‧ 2021-09-22

1 Like 0 留言 2483 瀏覽

鐵人賽 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

2 Like 0 留言 2410 瀏覽

鐵人賽自我挑戰組 DAY 28

用ChatGPT詠唱來完成工作與點亮前後端技能樹系列第 28 篇

技術【Day28】ChatGPT請教教我：React進階（六）- NextJS！路由系統！

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆前端技能樹...

一宵三筵 ‧ 2023-10-12

0 Like 1 留言 2399 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 #02 No-code 之旅 — Next.js 簡介

大家星期五快樂！TGIF～今天想跟大家分享 Next.js 這個 React 框架 (官網寫 "The React Framework for Pr...

Jade ‧ 2021-09-17

1 Like 0 留言 2299 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 #14 No-code 之旅 — 怎麼利用 Chakra UI 去做 React 元件客製化？

繼續昨天的主題，該怎麼用 Chakra UI 做開發呢？現成的元件該怎麼去做客製化？專案有定設計系統 (design system)，那怎麼跟 Chakra U...

Jade ‧ 2021-09-29

0 Like 0 留言 2174 瀏覽

鐵人賽 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

1 Like 0 留言 2092 瀏覽

鐵人賽 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 留言 2031 瀏覽

鐵人賽 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

0 Like 0 留言 1987 瀏覽

鐵人賽 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 留言 1939 瀏覽

鐵人賽 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 0 留言 1768 瀏覽

鐵人賽 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 留言 1732 瀏覽

鐵人賽 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

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

技術 [Day 14] Server-Side-Rendering - (1)

徵才 [台北] Web Application Developer

技術 [Day 15] Server-Side-Rendering - (2) feat. Next.js

技術 #06 No-code 之旅 — 用 Next.js 解決前後端？API Routes 簡介

技術 #05 No-code 之旅 — Next.js 的 Pages 與 Routing

技術 #13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

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

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

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

技術 #09 No-code 之旅 — 怎麼在 Client-side 抓取資料？SWR 簡介

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

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

技術 #08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

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

技術 #04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching

技術 #11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK

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

技術 #07 簡介篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

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

技術 【Day28】ChatGPT請教教我：React進階（六）- NextJS！路由系統！

技術 #02 No-code 之旅 — Next.js 簡介

技術 #14 No-code 之旅 — 怎麼利用 Chakra UI 去做 React 元件客製化？

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

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

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

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

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

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

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

標記使用者

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

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

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

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

技術【Day28】ChatGPT請教教我：React進階（六）- NextJS！路由系統！

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