Nextjs fetch data from Google sheet

3 steps implementation

1st

Get credential and setting up google sheet

1. Go at Google Cloud Platform

console -> create project -> search marketplace & enable “google sheet api”

Select Credentails and Manage service accounts.

After done with create_service_account -> select Manage keys at account action

Click ADD_KEY and select JSON -> create. Will receive .json file

*add .json file to Nextjs project (in this article naming file = key.json)

2nd

Handle with Google sheet

sheet_id is string from google sheet url after

example
sheet_id = 1xN...pKOE

and enable share this sheet

3rd

Implement with Nextjs

3.1 Install lib dependency

npm i googleapis

3.2 add env

• assign key GOOGLE_APPLICATION_CREDENTIALS = .json file path (step1)
• assign sheet_id = from step2

Project Tree

Use getServerSideProps to handle fetching data from sheet

| use id query to identify row

*note: recheck about sheet_page_name and column

getServerSideProps part

Using props to display

Result