How to Build Blog backend with V0

1// Paste this prompt into V0's AI chat:
2// Build a blog backend with Supabase. Create these tables:
3// 1. posts: id (uuid PK), author_id (uuid FK to auth.users), title (text), slug (text unique), content (text), excerpt (text), cover_image_url (text), status (text CHECK in 'draft','published','archived'), published_at (timestamptz), meta_title (text), meta_description (text), created_at (timestamptz), updated_at (timestamptz)
4// 2. categories: id (uuid PK), name (text), slug (text unique)
5// 3. post_categories: post_id (uuid FK), category_id (uuid FK), PRIMARY KEY (post_id, category_id)
6// 4. comments: id (uuid PK), post_id (uuid FK), author_name (text), content (text), is_approved (boolean default false), created_at (timestamptz)
7// Add RLS: anyone can read published posts, only authors can edit their own posts, comments require approval to be visible.
8// Generate the SQL migration.

1import { createClient } from '@supabase/supabase-js'
2import { notFound } from 'next/navigation'
3import type { Metadata } from 'next'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export const revalidate = 3600
11
12export async function generateStaticParams() {
13  const { data: posts } = await supabase
14    .from('posts')
15    .select('slug')
16    .eq('status', 'published')
17  return posts?.map((post) => ({ slug: post.slug })) ?? []
18}
19
20export async function generateMetadata({
21  params,
22}: {
23  params: Promise<{ slug: string }>
24}): Promise<Metadata> {
25  const { slug } = await params
26  const { data: post } = await supabase
27    .from('posts')
28    .select('meta_title, meta_description, cover_image_url')
29    .eq('slug', slug)
30    .eq('status', 'published')
31    .single()
32
33  if (!post) return {}
34  return {
35    title: post.meta_title,
36    description: post.meta_description,
37    openGraph: { images: post.cover_image_url ? [post.cover_image_url] : [] },
38  }
39}
40
41export default async function PostPage({
42  params,
43}: {
44  params: Promise<{ slug: string }>
45}) {
46  const { slug } = await params
47  const { data: post } = await supabase
48    .from('posts')
49    .select('*, comments(id, author_name, content, created_at)')
50    .eq('slug', slug)
51    .eq('status', 'published')
52    .single()
53
54  if (!post) notFound()
55
56  return (
57    <article className="mx-auto max-w-2xl py-8">
58      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
59      <div className="prose prose-lg" dangerouslySetInnerHTML={{ __html: post.content }} />
60    </article>
61  )
62}

1'use server'
2
3import { createClient } from '@supabase/supabase-js'
4import { revalidatePath, revalidateTag } from 'next/cache'
5
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function publishPost(postId: string) {
12  const { data: post, error } = await supabase
13    .from('posts')
14    .update({
15      status: 'published',
16      published_at: new Date().toISOString(),
17      updated_at: new Date().toISOString(),
18    })
19    .eq('id', postId)
20    .select('slug')
21    .single()
22
23  if (error) throw new Error(error.message)
24
25  revalidatePath('/blog')
26  revalidatePath(`/blog/${post.slug}`)
27}
28
29export async function savePost(formData: FormData) {
30  const title = formData.get('title') as string
31  const content = formData.get('content') as string
32  const excerpt = formData.get('excerpt') as string
33  const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
34  const metaTitle = formData.get('meta_title') as string || title
35  const metaDescription = formData.get('meta_description') as string || excerpt
36
37  const { error } = await supabase.from('posts').insert({
38    title,
39    slug,
40    content,
41    excerpt,
42    meta_title: metaTitle,
43    meta_description: metaDescription,
44    status: 'draft',
45  })
46
47  if (error) throw new Error(error.message)
48  revalidatePath('/dashboard/posts')
49}

1// Paste this prompt into V0's AI chat:
2// Build a cover image upload component for the blog post editor.
3// Requirements:
4// - Drag-and-drop area with preview using a 'use client' component
5// - Upload to Supabase Storage 'covers' public bucket
6// - Accept jpg, png, webp up to 5MB
7// - Show upload progress and preview after upload
8// - Return the public URL to store in posts.cover_image_url
9// - Use shadcn/ui Card for the drop zone, Button for manual select
10// - Add a delete button to remove the current cover image
11// - Use createBrowserClient for the upload (client-side operation)