DEV Community

Cover image for Connecting NextJS Mini Project with Google Spreadsheets as Database

Connecting NextJS Mini Project with Google Spreadsheets as Database

Frastyawan Nym on February 11, 2021

Did you know that we can use Google Sheets as our database? Yes! We can do that 👍. Today, I will share step by step to do it. I will use one of th...
Read full post
Collapse
 
athdromeda profile image
Ath Athoillah •

Hi, I get problem with child_process:

./node_modules/.pnpm/google-auth-library@8.6.0/node_modules/google-auth-library/build/src/auth/googleauth.js:17:0
Module not found: Can't resolve 'child_process'
Enter fullscreen mode Exit fullscreen mode

googleapis & next version:

...
    "googleapis": "^109.0.0",
    "next": "13.0.0",
...
Enter fullscreen mode Exit fullscreen mode

Anybody have solution?

Collapse
 
athdromeda profile image
Ath Athoillah •

Ok, try to change getStaticProps() to getServerSideProps() and move all getEmojiList() body function to getServerSideProps() and it's work

Collapse
 
danforejtek profile image
danforejtek •

Thank you very much! I was trying google way of doing it developers.google.com/sheets/api/q... from their documentation and it was total hell.
Your way is much simpler and understandable. JWT is much better.

Collapse
 
frasnym profile image
Frastyawan Nym •

Your most welcome! 🥳

Collapse
 
gandarufu profile image
Gandarufuuu •

Sheesh, best tutorial I've found so far. Thanks so much for that!
To everyone who is on a newer next.js version with the app-directory:

  • Rename "page.tsx" to "page.js".
  • Place code from "index.js" in "page.js".
  • Inside "page.js" before return add:

const data = await getData()

  • Delete getStaticProps function and replace with

async function getData(){
const res = await getDataFromSheets();
const data = res.slice(1, res.length)
return data
}

Collapse
 
_denb profile image
Daniele Bertella •

Hi thanks for the useful guide it's very simple and complete! Question for you or maybe someone else. Did you try to cache this requests to be able to use them in different routes without the need to share props between them? I'm trying to use cache from react with no luck, I just opened an issue on googleapi repo too but maybe somebody already found a solution here. Thanks again!

Collapse
 
_denb profile image
Daniele Bertella •

UPDATE: I closed the issue, FYI it turned out react cache doesn't cache request between different server components while unstable_cache from next/cache does hope I will save some time if you are stamping on the same issue

Collapse
 
lucasromerodb profile image
Luke •

Thanks a lot! GitHub repo starter here: nextsheet.vercel.app/

Collapse
 
__junaidshah profile image
Junaid •

will this be valid if i have users logged in and i want them to store there data into there respective google sheets (asking for permission from them obviously )

Collapse
 
manuelobre profile image
Manuel Obregozo •

Way simpler than other docs I found online. Simple and concise.
Good post!

Collapse
 
jalinog profile image
Joshua Andrew Jourdain •

i am getting this error....

Missing required parameters: spreadsheetId, range

Collapse
 
sergo profile image
Sergo •

You need to use the keyword 'range', like:

const response = await sheets.spreadsheets.values.get({
        spreadsheetId: process.env.SHEET_ID,
        range, //not customRange
});
Enter fullscreen mode Exit fullscreen mode
Collapse
 
olpeh profile image
Olavi Haapala •

Thanks! This was super helpful

Collapse
 
frasnym profile image
Frastyawan Nym •

It is my pleasure, to be able to help 😊