Next.js App Router
/

Learn how to build a SaaS with Next.js App Router and Supabase

CRUD: Displaying, updating and deleting Posts

In this lesson, we learn how to perform CRUD operations against the user's blog posts using Next.js Server Actions and the Supabase DB

Reading Time: 22 minutes

In this lesson, we learn how to perform CRUD operations against the user's blog posts. We'll start by displaying the user's posts on the dashboard, creating a post page to see the post's content, then we'll add a page to edit posts, and finally, we'll add the ability to delete posts.

Displaying posts

Let's start by displaying the user's posts on the dashboard. From here, we will be able to click on a post to see its content, edit it, or delete it.

First, let's define the query that we need to fetch the user's posts. We'll add it to the lib/queries/posts.ts file:

lib/queries/posts.ts
import { Database } from '@/database.types'; import { SupabaseClient } from '@supabas ...