🌱

ポートフォリオの改善予定をgithubのissuesから取得する

2022/02/05に公開

GitHub

Next.js

tech

ポートフォリオなどの個人アプリを運用していくにあたって、どうしても改善点や未実装機能などが出てきます。
それらの改善予定をどこにどうやって管理するか悩んだところ、githubのissuesを使おうと考えました。

実際のページ

issues

個人サイトに反映した結果
https://noriyu.dev/kaizen

githubのissuesから取得する

私のプロジェクトのissuesは以下のAPIで取得することができます。
api:https://api.github.com/repos/y0303noki/noriyu-nextjs-app/issues

このように
/repos/ユーザー名/リポジトリ名/issues で任意のissuesを取得することができます。
参考

これでissuesを個人サイトに表示しつつ、issuesが更新されたら適宜個人サイトにも反映することが可能です。

Next.jsでの取得

Next.jsではgetServerSideProps()でサーバーサイドでapiを実行することができます。
私のサイトではココです。

export const getServerSideProps: GetStaticProps = async (context) => {
  const res = await fetch(issueUrl);
  const datas = await res.json();

 // datasをissuesに変換
 
  return { props: { issues: issues } };
};

これを/kaizen ページに反映させることができました。

さいごに

こんな感じで随時issuesを募集しています。新機能だけでなく、既存バグなどの修正も見つけたら教えていただけると嬉しいです🙏