iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

在這 30 天想要製作最近很紅的 no-code (無程式碼) 網頁~

身為喜歡寫程式的工程師,這次想挑戰的並不是使用 no-code 平台實作一個網頁出來,而是自己手刻製作無程式碼的個人網頁。什麼意思?我會:
- 用 Next.js 做整個網頁
- 串各種 API 顯示資料當網頁內容
- 部署

那 no-code 的點在哪呢?這網頁不需要更新或編輯,都會自動拿到最新資料,而且做完之後大家都可以拿來用做自己的個人網頁!所以 no-code 是未來(開發完)的事,也是對其他人來說應該是 no-code 沒錯XD

歡迎看看我的無程式碼之旅 <3

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 1

#01 No-code 之旅 — 系列文介紹

前言 嗨,大家好!我是 Jade,這是我第一次參加 iTHome 鐵人賽~ 好緊張XD 猶豫了很久之後,決定挑戰自己在這 30 天製作最近很紅的 no-code...

2021-09-16 ‧ 由 Jade 分享
DAY 2

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

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

2021-09-17 ‧ 由 Jade 分享
DAY 3

#03 No-code 之旅 — 什麼是 SSG、SSR、CSR、ISR?

嗨大家!連假第一天過得如何?~ 今天想跟大家分享的主題是各種網頁渲染模式,就是 SSG、SSR、CSR、ISR。長得都差不多,可是細節都不太一樣,在決定要用哪一...

2021-09-18 ‧ 由 Jade 分享
DAY 4

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

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

2021-09-19 ‧ 由 Jade 分享
DAY 5

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

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

2021-09-20 ‧ 由 Jade 分享
DAY 6

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

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

2021-09-21 ‧ 由 Jade 分享
DAY 7

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

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

2021-09-22 ‧ 由 Jade 分享
DAY 8

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

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

2021-09-23 ‧ 由 Jade 分享
DAY 9

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

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

2021-09-24 ‧ 由 Jade 分享
DAY 10

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

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

2021-09-25 ‧ 由 Jade 分享