# 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:
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
-
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.
-
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 routevote: 1-5description: the feedbackdate: when feedback was providedemail
This is how our spreadsheet looks like:
- I installed the google spreadsheet SDK in this NextJS project
terminal
# NextJS Server Action and Google Spreadsheet
As the NextJS documentation says:
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:- invoke the
sendFeedbackserver action:
FeedbackSubmitButton.ts
- 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 valueFeedbackSubmitButton.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: