Next.jsでGithub APIを使用する方法(octokit/rest)Typescript

octokit/restを利用してリポジトリのコンテンツを参照

Typescript用のGithub APIを利用するライブラリ

octokit/rest

インストール

npm i @octokit/rest

使い方

import { Octokit } from "@octokit/rest";

ドキュメント

認証

Github APIを利用しているとアクセス制限にかかるので認証(GITHUB_TOKEN)を取得し宣言しておきます。
私の場合は、リポジトリのコンテンツにアクセスしたかったのでGithubのパーソナルアクセストークンを取得し環境変数として.env.localなどに定義しました。
本番環境(Netlify)では環境変数を定義するところがあるのでそちらで設定をしました。

GITHUB_TOKEN = "*********"

const octokit = new Octokit({
  auth: `${process.env.GITHUB_TOKEN}`,
});

リポジトリ コンテンツのファイル名の取得

下記を関数の中に

  const response = await octokit.rest.repos
    .getContent({
      owner: owner_name,
      repo: repo_name,
      path: dir_path,
    })

リポジトリ コンテンツのデータの取得

下記を関数の中に

  const response = await octokit.rest.repos
    .getContent({
      owner: owner_name,
      repo: repo_name,
      path: dir_path/file_name,
    })

コンテンツのデータはbase64でデコードする必要があります。