iT邦幫忙

nextjs相關文章
共有 107 則文章
0 Like 0 留言 801 瀏覽
鐵人賽 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 留言 716 瀏覽
鐵人賽 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 留言 1332 瀏覽
鐵人賽 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 留言 2633 瀏覽
鐵人賽 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 留言 499 瀏覽
鐵人賽 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 留言 1444 瀏覽
鐵人賽 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 留言 1643 瀏覽
鐵人賽 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 留言 2127 瀏覽
鐵人賽 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 留言 2993 瀏覽
鐵人賽 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 留言 1715 瀏覽
鐵人賽 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 留言 2845 瀏覽
鐵人賽 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 留言 1048 瀏覽
鐵人賽 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 留言 1815 瀏覽
鐵人賽 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 留言 1851 瀏覽
鐵人賽 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 留言 1378 瀏覽
鐵人賽 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 留言 2190 瀏覽
鐵人賽 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 留言 15233 瀏覽
鐵人賽 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 留言 952 瀏覽
鐵人賽 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
0 Like 0 留言 1220 瀏覽
鐵人賽 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 留言 876 瀏覽
鐵人賽 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 留言 452 瀏覽
鐵人賽 Modern Web DAY 17
關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列 第 17 篇

技術 [Day 17]獨自一人的全端攻略(前端篇)

挑戰目標: MockNative Camp 最近這兩年在工作上一直想要有同事可以交流進步，或者是遇到可以學習的同事，但終究在這兩份工作中都屬於自己一個人單打獨...

Moscle.dev ‧ 2021-10-02
0 Like 0 留言 590 瀏覽
鐵人賽 Modern Web DAY 15
關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列 第 15 篇

技術 [Day 15]吶吶，還有一半別想跑(前端篇)

挑戰目標: MockNative Camp 今天繼續來製作我們的Footer，目標前兩天我們已經將這些顯示文字都寫入到config中next.config.j...

Moscle.dev ‧ 2021-09-30
1 Like 0 留言 2062 瀏覽
鐵人賽 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 留言 745 瀏覽
鐵人賽 Modern Web DAY 13
關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列 第 13 篇

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

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

Moscle.dev ‧ 2021-09-28
0 Like 0 留言 5660 瀏覽
鐵人賽 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
0 Like 0 留言 632 瀏覽
鐵人賽 Modern Web DAY 12
關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列 第 12 篇

技術 [Day 12]我也好想成為時間管理大師(前端篇)

挑戰目標: MockNative Camp 挑戰還沒過半就已經覺得自己債越積越深了...今天要來挑戰實作Footer(原本我們可以從開發者工具看到footer...

Moscle.dev ‧ 2021-09-27
0 Like 0 留言 1106 瀏覽
鐵人賽 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
0 Like 0 留言 502 瀏覽
鐵人賽 Modern Web DAY 11
關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列 第 11 篇

技術 [Day 11]在你順利的時候來一拳才是標配(前端篇)

挑戰目標: MockNative Camp 今天要來實作Nav Detail的部分，昨天將相關的List放到了config中，也可以成功的hover該tab後...

Moscle.dev ‧ 2021-09-26
0 Like 0 留言 2152 瀏覽
鐵人賽 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 留言 559 瀏覽
鐵人賽 Modern Web DAY 10
關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列 第 10 篇

技術 [Day 10]怎麼每天都像在趕末班電車R(前端篇)

挑戰目標: MockNative Camp前端 週末也是很多事要做，每天大概都晚上9點到12點是鐵人賽的工作時間，寫code, test, debug和截圖之...

Moscle.dev ‧ 2021-09-25
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙