Блог

Главная - Вопросы по программированию - Сообщение об ошибке при подключении к электронной таблице Google в Next.js

Сообщение об ошибке при подключении к электронной таблице Google в Next.js

#javascript #reactjs #google-sheets #next.js

Вопрос:

Я новичок в Next.js и пытается использовать Google sheet в качестве базы данных для проекта. Мое приложение работает нормально, но по-прежнему отображается на дисплее «не забыл настроить переменную среды». Я создал .env.local файл и объявил все переменные, которые мне требовались, но все равно получаю ошибку.

введите описание изображения здесь

Sheet.js

Это sheet.js файл, в котором я использую Google API.

 import { google } from "googleapis";

export async function getDataFromSheets() {
  try {
    const target = ["https://www.googleapis.com/auth/spreadsheets.readonly"];
    const jwt = new google.auth.JWT(
      process.env.GOOGLE_SHEETS_CLIENT_EMAIL,
      null,
      (process.env.GOOGLE_SHEETS_PRIVATE_KEY || "").replace(/\n/g, "n"),
      target
    );

    const sheets = google.sheets({ version: "v4", auth: jwt });
    const response = await sheets.spreadsheets.values.get({
      spreadsheetId: process.env.SPREADSHEET_ID,
      range: process.env.SPREADSHEET_NAME,
    });

    const rows = response.data.values;
    if (rows.length) {
      return rows.map((row) => ({
        title: row[0],
        description: row[1],
      }));
    }
  } catch (err) {
    console.log(err);
  }

  return [];
}

index.js

Это основной файл index.js , в котором мы написали весь код для создания пользовательского интерфейса.

 import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

import { getDataFromSheets } from "./api/sheets";

export default function Home({ data }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Nextsheet 💩</title>
        <meta
          name="description"
          content="Connecting NextJS with Google Spreadsheets as Database"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>Welcome to Nextsheet 💩</h1>
        <p>Connecting NextJS with Google Spreadsheets as Database</p>
        <ul>
          {data amp;amp; data.length ? (
            data.map((item) => (
              <li key={item}>
                {item.title} - {item.description}
              </li>
            ))
          ) : (
            <li>Error: do not forget to setup your env variables 👇</li>
          )}
        </ul>
      </main>
    </div>
  );
}

console.log(process.env.SPREADSHEET_ID);

export async function getStaticProps() {
  const sheet = await getDataFromSheets();
  return {
    props: {
      data: sheet.slice(0, sheet.length), // remove sheet header
    },
    revalidate: 1, // In seconds
  };
}

.env.local

For security purposes I have hidden my API key.

 GOOGLE_SHEETS_PRIVATE_KEY=d38ed59277fcc18c3b6aXXXXXXXXXXXXXX    
GOOGLE_SHEETS_CLIENT_EMAIL=mini-project@miniproject-328105.iam.gserviceaccount.com
SPREADSHEET_ID=https://docs.google.com/spreadsheets/d/1MO8RLXxYN3n_Zp9YTILeCk28T4ueqDba3OjIuMULpMU/edit#gid=0
SPREADSHEET_NAME=sheet
Метки: