看了好幾天的 Next.js 介紹，是不是想要開始做個小專案，試試 Next.js 呢？我今天做了小小 project 使用 Next.js 的各種 data fetching functions (可以看這篇) 來串 Github API！不過今天不會詳細跟大家分享怎麼實作，明天再繼續～

不過設計就這樣隨便做，請見諒Ｑ

Setup

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

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

Home 首頁

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

在首頁也加了兩個 input，個別是 Github 的 username 和 repository name。填了 username 之後，旁邊的 Go 按鈕會亮起來 (代表可以點下去了！)，一點下去我們會被導去 User 頁面。下面的 input 是給 repository 用的，如果想看某個 repo，需要 username 和 repository 兩個都填完，旁邊的按鈕才能點，幫我們導頁去 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 的方法！今天我用的是 getStaticProps 和 getStaticPaths，而且還加了 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]，user 和 repo 為動態資訊，一樣是用 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

看更多

• Github API
• #04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching
• #05 No-code 之旅 — Next.js 的 Pages 與 Routing
• #08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API