#07 简介篇 — 使用 Next.js 的各种 Data Fetching 方式实作小专案 ft. Github API

看了好几天的 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