Send your feedback

EMAIL
MESSAGE (required)
ADD CODE SNIPPET
ADD IMAGE/SCREENSHOTS
VOTE
NextJS Server Action and Google Spreadsheet
NextJS Server Action and Google Spreadsheet

How we have used NextJS server actions to store data in a Google Spreadsheet

 
Fabio Biondi
Fabio Biondi
Google Developer Expert
Microsoft MVP
techs
 

# Introduction

This website started as a simple MVP, a site to experiment with a new way of creating tutorials.
  • We started without a CMS and without a database
  • all articles are currently written in markdown
  • after we added the authentication system and users management
  • now users can give likes, bookmark articles and there is an history of what users have read
  • and week after week we're adding new features
For the same reason, the first version of our feedback form was created by using NextJS server action but the problem was: where to save the feedback since we didn't have a user management or even a database yet?
I have to admit that I had been wanting to experiment with Google Spreadsheet integration with NextJS server actions for a while and so I decided to go down this path.
So this was our goal:
Nextjs Form Action submit save Google SpreadSheet

1. users fill the feedback form

Google spreadsheet columns

2. feedback are saved into Google Spreadsheet:

Google spreadsheet columns
We are currently improving our feedback system (since we finally have a Postgres database) especially because we need to involve many content reviewers. So we need a more structured management of feedbacks. We'll talk about it in the next articles

# Let's start with Google Spreadsheet

  1. First I had to understand how Google Spreadsheet and its SDK work and the Google official documentation provide all the info I needed to start.
  2. I created an empty Spreadsheet in our Google Drive and defined which fields I wanted to save, creating a column for each field:
  • url: the visited route
  • vote: 1-5
  • description: the feedback
  • date: when feedback was provided
  • email
This is how our spreadsheet looks like:
Google spreadsheet columns
  1. I installed the google spreadsheet SDK in this NextJS project
terminal

# NextJS Server Action and Google Spreadsheet

Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.
So this strategy represents an easy, fast and safe way to implement my code with the certainty of not exposing APIKEY and other sensitive information.
In this article I will not go into detail on how to use server actions in NextJS applications since there are a lot of articles and information already available. Here the NextJS documentation and here you can find an amazing resource... Google : ) And I won't explain how to work in Google Spreadsheet as well. There would be too much to say for a small article like this.
I would just like to give you an idea that maybe you hadn't thought of yet and show you how cool Server Actions are
I first created a FormFeedbackPanel component with the form (inputs, rating components, textarea, ...) and where I invoke the server action. This is a simple component that:
  1. invoke the sendFeedback server action:
FeedbackSubmitButton.ts
  1. it contains the form and invoke the server action when submitted:
FeedbackSubmitButton.ts
Since I want to show a spinner while user is submitting the form, I also create a FeedbackSubmitButton component:
FeedbackSubmitButton.ts
In this component I simply use useFormStatus to get the pending value
FeedbackSubmitButton.ts

# Server Action

And here a simplified version of our server action invoked by the component.
Some notes:
  • all the KEYS are saved in environment variables
  • ZOD is used to validate the form inside the form action
  • There is room for many optimizations both on the code and security side
  • Off course feel free to split and organize this snippet in multiple functions and improve it as you want
It's just a PoC I have created in a couple of hours and here I have summarized the most important steps. So just take it as inspiration
Read comments to understand how it works:
actions/feedback.actions.ts
And this is what is saved on spreadsheet when you leave a feedback:
Google spreadsheet columns

Did you like this content?

Your feedback is very important to us!
13
Jun
2024
Fabio Biondi
Fabio Biondi
Google Developer Expert
Microsoft MVP
NGRX Book
Video corso Angular Evolution (italiano)