Server Actions

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.

SaaSDay uses Server Actions for number of components like:

• Stripe Checkout
• Lemon Squeezy Checkout
• User Profile Update
• Newsletter Signup
• Waitlist Signup
• and more...

Server actions are defined in the app/actions folder. Each action is a separate file that exports an async function.

A Server Action can be defined with the React "use server" directive. You can place the directive at the top of an async function to mark the function as a Server Action, or at the top of a separate file to mark all exports of that file as Server Actions.

Partial example of a Server Action for a newsletter signup:

'use server'
 
import mailchimp from "@mailchimp/mailchimp_marketing";
 
mailchimp.setConfig({
    apiKey: process.env.MAILCHIMP_API_KEY,
    server: process.env.MAILCHIMP_API_SERVER,
});
export async function insertNewsletterSubscriber(email: string) {
    console.log('Adding newsletter subscriber. Email:', email);
 
    try {
 

I find this to be a very useful feature. It's a great way to keep your server-side code organized and separate from your client-side code. It also makes it easy to reuse server-side code across different components.