iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

製作你的無程式碼(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 fetching functions (可以看這篇) 來串 Github API!不過今天不會詳細跟大家分享怎麼實作,明天再繼續~

不過設計就這樣隨便做,請見諒Q

Day07

Setup

用 Next.js 的 create-next-app,在終端機輸入以下指令建立專案:

npx create-next-app
# or
yarn create next-app

Home 首頁

Day07 Home
在首頁用 Next.js 的 Link (next/link) 加了兩個連結,一個是回到 Home,另外一個是導去一個叫做 Next 的頁面。像這篇提到的,用 Link 換頁是 client-side 的 routing,所以瀏覽器不會看到白畫面喔~

在首頁也加了兩個 input,個別是 Github 的 usernamerepository name。填了 username 之後,旁邊的 Go 按鈕會亮起來 (代表可以點下去了!),一點下去我們會被導去 User 頁面。下面的 input 是給 repository 用的,如果想看某個 repo,需要 usernamerepository 兩個都填完,旁邊的按鈕才能點,幫我們導頁去 Repo 頁面。

Day07 User & Repo
左邊是 Repo 頁,右邊是 User

Next 頁

Next 頁面是採用 Static Generation 產生出來的,也就是使用 getStaticProps 去抓取該頁所需的內容。透過 props 去傳遞 data

export async function getStaticProps() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const data = await res.json();

  return {
    props: { data },
  };
}

User 頁

User 頁的路徑是 /users/[user]user 為動態資訊,也就是使用 dynamic routes 的方法!今天我用的是 getStaticPropsgetStaticPaths,而且還加了 revalidate,讓頁面會不斷更新,所以這頁是採用 Incremental Static Regeneration 的模式:

export async function getStaticProps(context) {
  const res = await fetch(
    `https://api.github.com/users/${context.params.user}`
  );
  const data = await res.json();

  return {
    props: { data },
    revalidate: 24 * 60 * 60, // 24 hours
  };
}

export async function getStaticPaths() {
  const res = await fetch("https://api.github.com/users");
  const data = await res.json();
  const paths = data.slice(0, 1000).map((u) => ({ params: { user: u.login } }));

  return { paths, fallback: "blocking" };
}

明天再詳細解釋喔~ (來了!)

Repo 頁

Repo 頁的路徑是 /repos/[user]/[repo]userrepo 為動態資訊,一樣是用 dynamic routes,不過這頁是採用 getServerSideProps 實做出來的,也就是 Server-side Rendering:

export async function getServerSideProps(context) {
  const res = await fetch(
    `https://api.github.com/repos/${context.params.user}/${context.params.repo}`
  );
  const data = await res.json();

  return {
    props: { data },
  };
}

小結

今天這個小專案應該有用到前幾天學的東東,大家覺得如何呢?有沒有什麼問題?歡迎發問喔~
祝大家明天上班上課愉快!

Live Demo

晚安 <3

看更多


上一篇
#06 No-code 之旅 — 用 Next.js 解決前後端?API Routes 簡介
下一篇
#08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30

尚未有邦友留言

立即登入留言