iT邦幫忙

nextjs相關文章
共有 38 則文章
鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 10

技術 #10 實作篇 — 使用 SWR 抓取和 Cache 資料

嗨大家!昨天跟大家分享一個 library 叫做 SWR,文章在這裡~ 今天用 SWR 新增了小功能,使用者可以輸入 Github username 然後列出該...

鐵人賽 Modern Web DAY 9

技術 [Day 9]人不作死就不會死(前端篇)

挑戰目標: MockNative Camp前端 昨天嘗試refactor時遇到了來不及解決的Bug,今天專心的在看一遍官方文件,這次注意到了 當時我使用的是...

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

技術 [Day 8]開賽八天即遭遇難題(前端篇)

挑戰目標: MockNative Camp前端 今天原本是要來refactor和解決hover的問題的,但是在將navtab給component化時遭遇難題,...

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

技術 [Day 5]新手村外的首戰是史萊姆應該是定番吧

今天我們來完成Header,不過位置方面我是使用Tailwinds CSS,要花時間客製化位置,但我沒那麼多時間所以沒辦法對的很準,請看官們見諒。 這是Nati...