Run Authenticated Server-side Mutations with Next.js Server Actions

Server Actions are a way to perform server-side mutations in the Next.js App Router. In this lesson, we create a <NewTweet /> component that renders a form for the user to enter a new tweet. This form is submitted to a Server Action, which writes this data to Supabase.

Additionally, we create a Server Action Supabase client and call the getUser function to fetch the currently signed in user.

Lastly, we write a Row Level Security (RLS) policy to enable the insert action for authenticated users.

Code Snippets

Posting form to Server Action

export default function NewTweet() {
  const addTweet = async () => {
    "use server";
  };

  return <form action={addTweet}>...</form>;
}

Create Supabase client in Server Action

const supabase = createServerActionClient<Database>({ cookies });

Get user from Supabase client

const {
  data: { user },
} = await supabase.auth.getUser();

Insert tweet with Supabase

await supabase.from("tweets").insert({...});

Resources

• Server Action docs
• Supabase Auth Helpers for Next.js
• Inserting data with supabase-js