1

am getting an error while running my next JS application, am trying to read and write data from google sheet via next JS. can anyone please try to fix my error. If you have any question please free fell to ask.

Error log

index.js

 import Head from 'next/head'
    import Image from 'next/image'
    import styles from '../styles/Home.module.css'
    
    import { getDataFromSheets } from './libs/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>
      )
    }
    export async function getStaticProps(context) {
    
      const sheet = await getDataFromSheets();
    
      return {
        props: {
          data: sheet.slice(0, sheet.length), // remove sheet header
        },
        revalidate: 1, // In seconds
      };
    }

sheet.js

This is my sheet.js file where I perform read and write Operation. for read and write operation am using google sheet.

import { google } from 'googleapis';

export async function getDataFromSheets() {
  try {

    const target = ['https://www.googleapis.com/auth/spreadsheets'];
    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: 'sheet'
    });


    const res = await sheets.spreadsheets.values.append({
      spreadsheetId: process.env.SPREADSHEET_ID,
      range: 'sheet',
      valueInputOption: 'USER_ENTERED',
      requestBody: {
        values: [['Vikas,Vikas Adeed']],
      }
    })

    console.log(res)

    const rows = response.data.values;


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

  return [];
}
  • Could you please add the full error in the question? – juliomalves Oct 13 '21 at 11:52
  • @juliomalves i have attached error log you can checkout –  Oct 13 '21 at 12:58
  • 4
    Does this answer your question: [Error: How to serialize data from getStaticProps : Next.js](https://stackoverflow.com/questions/66106776/error-how-to-serialize-data-from-getstaticprops-next-js)? Try using `JSON.parse(JSON.stringify(sheet.slice(0, sheet.length)))` before passing the data in the `getStaticProps` return statement. – juliomalves Oct 13 '21 at 14:00
  • @juliomalves Thanks for given your effort , I Solved my problem –  Oct 13 '21 at 18:15

0 Answers0