Next.js の静的サイトのビルド時に Python で外部 API から最新情報を取得する

Next.js の静的サイトのビルド時に外部 API からデータを取り込んで加工してから、それをサイトのデータソースとして使うサンプルです。ホスティングサービスとして Cloudflare Pages を使っています。

1 日 1 回大規模データを取り込んで加工して、その日のデータを静的サイトで高速表示したい、みたいなパターンを想定しています。

1. Next.js のプロジェクトを作成する

まずは以下のコマンドで Next.js のプロジェクトを作成します。TypeScript オプションをつけておきます。

npx create-next-app --ts mysite
cd mysite

2. Python のコードを書く

プロジェクトができたところで、早速 Python コードから書いていきます。前回の手順で作成された mysite フォルダの直下に script.py ファイルを作成します。

script.py

import datetime
import requests
import json

# データ取得日時取得
time_delta = datetime.timedelta(hours=9)
jst = datetime.timezone(time_delta, 'JST')
now = datetime.datetime.now(jst)
load_date = now.strftime('%Y/%m/%d %H:%M:%S')

# 外部 API からデータ取得（今回はサンプルとして Yahoo! ニュースを取得）
response = requests.get('https://news.yahoo.co.jp/')

# データを加工
data = {
    'load_date': load_date,
    'response': response.text
}

# JSON 形式で出力
with open('data.json', 'w') as f:
    json.dump(data, f)

今回はサンプルとして Yahoo! ニュースからデータを取得していますが、もちろん API や Selenium なども使えます。
また、データ加工は省略しましたが、データ取得後にいろいろデータ加工できます。

なお、ビルド時にこのコードが実行されるかどうかの確認として、データ取得日時も取得しています。

3. Next.js のコードを書く

次に、Next.js のコードを書きます。

SSG では getStaticProps 関数でデータ取得できますので、fs を使って Python アプリケーションが作成してくれる（であろう）data.json ファイルを読み込みます。

今回はサンプルなので response: any としていますが、実際にはデータ構造に沿って型を指定することになります。

pages/index.tsx

import { GetStaticProps } from "next";
import fs from "fs";

type Props = {
  data: {
    load_date: string;
    response: any;
  };
};
export const getStaticProps: GetStaticProps<Props> = async () => {
  const data = JSON.parse(fs.readFileSync("data.json", "utf8"));

  return {
    props: {
      data,
    },
  };
};

const Home = ({ data }: Props) => {
  return (
    <div>
      <h1>Pythonからデータ取得</h1>
      <p>データ取得日時：{data.load_date}</p>
      <pre>{data.response}</pre>
    </div>
  );
};

export default Home;

出来上がったら GitHub に push しておきます。

4. Cloudflare Pages にデプロイしてビルドする

GitHub に push できたら、Cloudflare Pages に連携します。
ビルドコマンドを以下のようにして、それ以外はデフォルトの設定で大丈夫かと思います。
Next.js のビルドの前に Python のコードが実行されるようにします。

ビルド コマンド:

pip install requests && python script.py && npx next build && npx next export -o out

ビルド出力ディレクトリ:

/out

サイトにアクセスしたところ、無事に Python のコードが動いているのを確認できました。なお、静的サイトなので再ビルドされるまでは取得データの内容やデータ取得日時が変わることはありません。

以上です！
間違っていたらご指摘お願いいたします。