Next.jsとGASをつなぐ

FirebaseのSparkプランを使い倒すために、Realtime-Databaseのデータをスプレッドシートにキャッシュして、Next.jsからアクセスするという処理を別のウェブサイト作成時に実装しました。

需要があるか分かりませんが、その中で使用したGAS・Next.js間のやり取りをまとめます。

GAS から Next.js API Routes を実行

GAS から Next.js の API を実行し、データを取得する方法です。

Next.js(データを送る)側

まず Next.js 側のコードです。

import type { NextApiRequest, NextApiResponse } from "next";

/** リクエストに対して返却するデータ */
type Data = { result: string };

export default async (req: NextApiRequest, res: NextApiResponse<Data>) => {
  try {
    res.status(200).json({ result: `Next.jsから送信されました！` });
  } catch (e) {
    res.status(500).json({ result: `エラー！` });
  }
};

リクエストにパラメータを含む場合は、以下のように設定します。

import type { NextApiRequest, NextApiResponse } from "next";

/** リクエストに対して返却するデータ */
type Data = { result: string };

/** 想定されるリクエストパラメータ */
type ExpectedRequestBody = Partial<{ message: string }>;

export default async (req: NextApiRequest, res: NextApiResponse<Data>) => {
  try {
    const body: ExpectedRequestBody = JSON.parse(req.body);

    res.status(200).json({ result: `「${body?.message}」を受け取りました！` });
  } catch (e) {
    res.status(500).json({ result: `エラー！` });
  }
};

GAS(データを受け取る)側

続いて GAS に記述するコードです。

/** 連携先のAPIエンドポイント */
const NEXTJS_END_POINT = "https://__________/api/test";

/** NextjsのAPIからデータを取得します */
const getDataFromNextjs = () => {
  /** APIレスポンス */
  const response = UrlFetchApp.fetch(NEXTJS_END_POINT);

  const result = JSON.parse(response.getContentText());
};

GAS の fetch は同期的に実行されるため、await や Promise のメソッドチェーンは不要です。

Next.js から GAS WEB アプリケーションを実行

Next.js から GAS の Web アプリケーションにアクセスし、データを取得する方法です。

GAS(データを送る)側

以下のプログラムを記述し、WEB アプリケーションとしてデプロイします。

const doGet = (e) => {
  /** 返却するデータ */
  const data = { message: "GASから送信されました！" };

  const res = ContentService.createTextOutput();
  res.setMimeType(ContentService.MimeType.JSON);
  res.setContent(JSON.stringify(data));
  return res;
};

Next.js(データを受け取る)側

/** GASのWEBアプリケーションURL */
const WEB_APP_URL =
  "https://script.google.com/macros/s/________________________/exec";

const getDataFromGAS = () => {
  const response = await fetch(END_POINT);

  const data = await response.json();
};