How to Build Simple CMS with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a simple CMS:
3// 1. posts table: id (uuid PK), title (text NOT NULL), slug (text UNIQUE NOT NULL), content (text — stores Markdown), excerpt (text), cover_image_url (text), status (text DEFAULT 'draft' — 'draft', 'published', 'archived'), author_id (uuid FK), published_at (timestamptz nullable), created_at (timestamptz), updated_at (timestamptz)
4// 2. categories table: id (uuid PK), name (text), slug (text UNIQUE)
5// 3. post_categories junction: post_id (uuid FK), category_id (uuid FK), PRIMARY KEY(post_id, category_id)
6// Add RLS: public can read published posts, only authenticated admin can write.
7// Seed 3 categories: Technology, Business, Tutorial.
8// Generate the SQL migration.

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3import { Badge } from '@/components/ui/badge'
4import Link from 'next/link'
5import { notFound } from 'next/navigation'
6
7export const revalidate = 3600
8
9export async function generateStaticParams() {
10  const supabase = await createClient()
11  const { data: posts } = await supabase
12    .from('posts')
13    .select('slug')
14    .eq('status', 'published')
15  return posts?.map((post) => ({ slug: post.slug })) ?? []
16}
17
18export default async function BlogPost({
19  params,
20}: {
21  params: Promise<{ slug: string }>
22}) {
23  const { slug } = await params
24  const supabase = await createClient()
25  const { data: post } = await supabase
26    .from('posts')
27    .select('*, post_categories(categories(name, slug))')
28    .eq('slug', slug)
29    .eq('status', 'published')
30    .single()
31
32  if (!post) notFound()
33
34  return (
35    <article className="max-w-3xl mx-auto p-6">
36      {post.cover_image_url && (
37        <img src={post.cover_image_url} alt={post.title} className="w-full rounded-lg mb-6" />
38      )}
39      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
40      <div className="flex gap-2 mb-6">
41        {post.post_categories?.map((pc: any) => (
42          <Badge key={pc.categories.slug} variant="secondary">
43            {pc.categories.name}
44          </Badge>
45        ))}
46      </div>
47      <div className="prose prose-lg max-w-none">
48        {post.content}
49      </div>
50    </article>
51  )
52}

1'use client'
2
3import { useState } from 'react'
4import { Input } from '@/components/ui/input'
5import { Textarea } from '@/components/ui/textarea'
6import { Button } from '@/components/ui/button'
7import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
8import { Label } from '@/components/ui/label'
9import { savePost } from '@/app/actions/posts'
10
11function slugify(text: string) {
12  return text
13    .toLowerCase()
14    .replace(/[^a-z0-9]+/g, '-')
15    .replace(/(^-|-$)/g, '')
16}
17
18export function PostEditor({ post, categories }: { post?: any; categories: any[] }) {
19  const [title, setTitle] = useState(post?.title ?? '')
20  const [slug, setSlug] = useState(post?.slug ?? '')
21  const [content, setContent] = useState(post?.content ?? '')
22  const [status, setStatus] = useState(post?.status ?? 'draft')
23
24  return (
25    <form action={savePost} className="space-y-4 max-w-3xl">
26      <input type="hidden" name="id" value={post?.id ?? ''} />
27      <div className="space-y-2">
28        <Label htmlFor="title">Title</Label>
29        <Input
30          id="title"
31          name="title"
32          value={title}
33          onChange={(e) => {
34            setTitle(e.target.value)
35            if (!post) setSlug(slugify(e.target.value))
36          }}
37          placeholder="Post title"
38          required
39        />
40      </div>
41      <div className="space-y-2">
42        <Label htmlFor="slug">URL Slug</Label>
43        <Input
44          id="slug"
45          name="slug"
46          value={slug}
47          onChange={(e) => setSlug(e.target.value)}
48          placeholder="post-url-slug"
49          required
50        />
51      </div>
52      <div className="space-y-2">
53        <Label htmlFor="content">Content (Markdown)</Label>
54        <Textarea
55          id="content"
56          name="content"
57          value={content}
58          onChange={(e) => setContent(e.target.value)}
59          placeholder="Write your post in Markdown..."
60          rows={20}
61          required
62        />
63      </div>
64      <div className="space-y-2">
65        <Label>Status</Label>
66        <Select name="status" value={status} onValueChange={setStatus}>
67          <SelectTrigger>
68            <SelectValue />
69          </SelectTrigger>
70          <SelectContent>
71            <SelectItem value="draft">Draft</SelectItem>
72            <SelectItem value="published">Published</SelectItem>
73            <SelectItem value="archived">Archived</SelectItem>
74          </SelectContent>
75        </Select>
76      </div>
77      <input type="hidden" name="status" value={status} />
78      <div className="flex gap-2">
79        <Button type="submit">Save</Button>
80        <Button type="submit" name="action" value="publish" variant="default">
81          Save & Publish
82        </Button>
83      </div>
84    </form>
85  )
86}

1'use server'
2
3import { createClient } from '@/lib/supabase/server'
4import { revalidatePath, revalidateTag } from 'next/cache'
5import { redirect } from 'next/navigation'
6
7function slugify(text: string) {
8  return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
9}
10
11async function ensureUniqueSlug(slug: string, excludeId?: string) {
12  const supabase = await createClient()
13  let candidate = slug
14  let suffix = 1
15
16  while (true) {
17    let query = supabase
18      .from('posts')
19      .select('id')
20      .eq('slug', candidate)
21    if (excludeId) query = query.neq('id', excludeId)
22    const { data } = await query.maybeSingle()
23    if (!data) return candidate
24    candidate = `${slug}-${suffix}`
25    suffix++
26  }
27}
28
29export async function savePost(formData: FormData) {
30  const supabase = await createClient()
31  const id = formData.get('id') as string
32  const title = formData.get('title') as string
33  const rawSlug = formData.get('slug') as string
34  const content = formData.get('content') as string
35  const action = formData.get('action') as string
36  let status = formData.get('status') as string
37
38  if (action === 'publish') status = 'published'
39
40  const slug = await ensureUniqueSlug(slugify(rawSlug), id || undefined)
41  const excerpt = content.slice(0, 200).replace(/[#*_`]/g, '')
42
43  const postData = {
44    title,
45    slug,
46    content,
47    excerpt,
48    status,
49    updated_at: new Date().toISOString(),
50    ...(status === 'published' ? { published_at: new Date().toISOString() } : {}),
51  }
52
53  if (id) {
54    await supabase.from('posts').update(postData).eq('id', id)
55  } else {
56    await supabase.from('posts').insert(postData)
57  }
58
59  if (status === 'published') {
60    await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}/api/revalidate?slug=${slug}`, {
61      method: 'POST',
62    }).catch(() => {})
63  }
64
65  revalidatePath('/admin/posts')
66  redirect('/admin/posts')
67}

1// Paste this prompt into V0's AI chat:
2// Build an admin posts dashboard at app/admin/posts/page.tsx.
3// Requirements:
4// - Server Component that fetches all posts from Supabase ordered by updated_at desc
5// - Display in a shadcn/ui Table with columns: Title, Slug, Status, Categories, Updated, Actions
6// - Status column uses Badge: draft=gray, published=green, archived=yellow
7// - Actions column has DropdownMenu with Edit, Publish, Archive, and Delete options
8// - Delete uses AlertDialog for confirmation before deleting
9// - Add a "New Post" Button at the top that links to app/admin/posts/new
10// - Include a summary row showing total posts, published count, and draft count
11// - Add Tabs to filter between All, Published, and Drafts
12// - Use Card wrapper for the table section