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:
1. users fill the feedback form
2. feedback are saved into Google Spreadsheet:
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
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 sendFeedback server 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 value
