在 Next.js 中连接到 Google 电子表格时出错

Question

I am new to Next.js and trying to use google sheet as a database for a project.我是 Next.js 的新手，并试图将 google sheet 用作项目的数据库。 My application is working fine but still displays in display "not forgot to setup environment variable".我的应用程序运行良好，但仍显示“未忘记设置环境变量”。 I have created a .env.local file and I have declared all variables those I required for me, but still getting an error.我创建了一个.env.local文件，并声明了我需要的所有变量，但仍然出现错误。

Sheet.js

This is sheet.js file where I use google API.这是我使用 google API 的sheet.js文件。

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

This is main file of index.js where we wrote all code for making UI.这是index.js的主文件，我们在其中编写了所有用于制作 UI 的代码。

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 && 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.为了安全起见，我隐藏了我的 API 密钥。

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

Answer 1

You just need quotes around values in .env.local file.您只需要在 .env.local 文件中为值加上引号。

Right Way正确的路

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"

Wrong Way错误道

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

在 Next.js 中连接到 Google 电子表格时出错

问题描述

1 个解决方案

解决方案1
0 2022-05-20 06:28:33

在 Next.js 中连接到 Google 电子表格时出错

问题描述

1 个解决方案

解决方案1 0 2022-05-20 06:28:33

解决方案1
0 2022-05-20 06:28:33