Next.jsとGoogle Sheetsを連携する方法

Google Sheets APIの有効化: まず、Google Cloud Consoleで新しいプロジェクトを作成し、Sheets APIを有効にします。その後、認証情報を作成し、クライアントIDとクライアントシークレットを取得します。
プロジェクトのセットアップ: Next.jsプロジェクトを作成し、必要な依存関係をインストールします。次に、dotenvパッケージを使用して、クライアントIDとクライアントシークレットを含む環境変数を設定します。
認証フローの実装: Google Sheets APIへの認証フローを実装する必要があります。OAuth2を使用して認証トークンを取得し、APIリクエストに使用します。次のコードは、Next.jsでの認証フローの例です。

import { google } from 'googleapis';
// 認証情報の設定
const auth = new google.auth.OAuth2(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  process.env.REDIRECT_URI
);
// 認証URLの生成
const authUrl = auth.generateAuthUrl({
  access_type: 'offline',
  scope: ['https://www.googleapis.com/auth/spreadsheets'],
});
// 認証トークンの取得
const getToken = async (code) => {
  const { tokens } = await auth.getToken(code);
  auth.setCredentials(tokens);
  return tokens;
};

スプレッドシートへの読み書き操作: Google Sheets APIを使用して、Next.jsからスプレッドシートに読み書き操作を行うことができます。以下のコードは、スプレッドシートにデータを書き込む例です。

const writeDataToSheet = async (data) => {
  const sheets = google.sheets({ version: 'v4', auth });
  const request = {
    spreadsheetId: 'YOUR_SPREADSHEET_ID',
    range: 'Sheet1',
    valueInputOption: 'USER_ENTERED',
    resource: {
      values: data,
    },
  };
  const response = await sheets.spreadsheets.values.append(request);
  console.log('Data written to sheet:', response.data);
};

スプレッドシートからデータを読み取るには、sheets.spreadsheets.values.getメソッドを使用します。

これらの手順に従ってNext.jsとGoogle Sheetsを連携することができます。必要に応じて、他のGoogle Sheets APIのメソッドや機能を使用して、さまざまな操作を行うこともできます。