Best for
Developers who want a clean, minimal technical blog to share tutorials and articles
Stack
A ready-made Personal Dev Blog UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the Personal Dev Blogtemplate does, how it's wired, and where it's opinionated.
The Personal Dev Blog template is a focused writing platform: a BlogHeader with site name, tagline, and a search icon; a PostGrid of responsive PostCards showing title, date, reading time, and excerpt; individual PostPage views with full MDX rendering; a TagCloud for topic navigation; and a NewsletterSignup component below each post. It's built on shadcn/ui primitives, uses date-fns for date formatting, and next-mdx-remote for parsing MDX post files including frontmatter.
The template leans into readability over personality — clean typography, consistent spacing, and minimal visual noise. That's a deliberate trade-off: if you want pixel art or cinematic animations, look at Retro Pixel Blog or Luxury Portfolio. If your goal is getting words in front of readers quickly, this template does it cleanly and without distraction.
Honest caveats: the TagCloud component currently displays placeholder counts rather than counts computed from actual post frontmatter. That needs to be wired up after forking (the prompt pack covers this). More critically, date-fns will produce a hydration mismatch error if the locale isn't pinned between server and client rendering — a single import fix resolves it permanently. Both issues are in the gotchas section.
Key UI components
BlogHeaderSite name, tagline, and search icon — brand anchor and entry point to post search
PostCardArticle preview with title, date, reading time, and excerpt — the main blog list item
PostGridResponsive grid of PostCards with pagination for the main article index
PostPageIndividual article view with full MDX rendering for reading complete posts
TagCloudList of content tags with post counts for topic-based navigation
NewsletterSignupEmail capture component shown below posts for audience building
Libraries it leans on
next-mdx-remoteParses and renders .mdx blog post files including frontmatter fields (title, date, tags)
shadcn/uiCard, Input, and Button components used throughout PostCard, PostGrid, and NewsletterSignup
date-fnsFormats post dates in PostCard and PostPage — requires locale pinning to avoid hydration errors
Fork it and get it running
This template requires no API keys to fork and preview. You'll need Resend or Supabase only if you activate the NewsletterSignup. MDX posts require a local GitHub checkout — you can't write .mdx files directly in V0 chat.
Fork the template on V0
Go to https://v0.dev/chat/community/LBcIdD46HcZ. The preview shows a clean minimal blog with PostCards and a BlogHeader. Click the Fork button in the top-right of the preview panel to open the template in your own V0 chat.
You should see: A new V0 chat opens with the Personal Dev Blog template loaded.
Update the blog name and accent color in Design Mode
Press Option+D (Mac) or Alt+D (Windows) to enter Design Mode. Click on the blog name in BlogHeader and type your blog's name and tagline. Switch to the Themes tab to change the accent color. Design Mode edits don't cost credits — use it for all text and color changes before writing any chat prompts.
Tip: Also update the browser tab title in the root layout.tsx while in Design Mode — it defaults to a placeholder name.
You should see: BlogHeader shows your blog name and updated accent color in the preview.
Replace placeholder PostCards with your article ideas
In the V0 chat input, paste your first 3–4 article titles and excerpts and ask V0 to update PostGrid. Include the date, category, and a one-sentence excerpt for each. Use the 'Rename blog and update tagline' and 'Add dark mode toggle' prompts from the prompt pack for no-code tweaks first, then paste article data.
You should see: PostGrid shows your article titles, dates, and excerpts in the PostCard layout.
Connect GitHub to add real MDX posts
Open the Git panel in the V0 sidebar and click 'Connect to GitHub'. V0 creates a GitHub repo. Pull the repo locally and add your post files at content/posts/[slug].mdx. Each MDX file needs frontmatter: title, date (ISO 8601), description, and tags (array). Use path.join(process.cwd(), 'content/posts') in the server-side data fetching — see the date hydration gotcha below for the locale fix you'll also need.
Tip: Run the project locally after adding your first MDX file to verify it renders before deploying.
You should see: Your MDX posts render correctly in PostPage with proper date formatting.
Publish to production
Click Share in V0, select the Publish tab, and click 'Publish to Production'. Vercel deploys in 30–60 seconds. After the deploy, open your production URL and click a PostCard to verify the PostPage and MDX rendering work on the live site.
You should see: The blog is live with working post navigation and MDX rendering.
Add a custom domain
In Vercel Dashboard → Settings → Domains → Add, enter your domain. A yourname.dev or yourblog.com URL adds credibility. Follow Vercel's DNS instructions for your registrar — propagation typically takes under 10 minutes for most providers.
You should see: Your blog is accessible at your custom domain with automatic HTTPS.
The prompt pack
Copy-paste these straight into v0's chat to customize the Personal Dev Blogtemplate. Each one names this template's own components — no generic filler.
Rename blog and update tagline
Updates the blog name, tagline, and page metadata in the root layout in one prompt.
Update BlogHeader: change the blog name to 'Dev Dispatch' and the tagline to 'Weekly articles on Next.js, TypeScript, and building in public.' Update the browser tab title in layout.tsx to match: title: 'Dev Dispatch', description: 'Weekly articles on Next.js, TypeScript, and building in public.' Keep all existing BlogHeader styling and the search icon in its current position.
Add dark mode toggle to BlogHeader
Adds a dark mode toggle with next-themes and persists the user's preference across visits.
Add a sun/moon icon toggle button to BlogHeader, positioned to the left of the search icon. Use shadcn/ui ThemeProvider and the next-themes package. The toggle should switch between light and dark mode and persist the user's choice in localStorage. The blog should default to dark mode. Make sure all localStorage access is wrapped in a useEffect to avoid SSR errors.
Add newsletter signup below PostPage content
Activates the NewsletterSignup component with real Resend email delivery and inline confirmation.
Below the PostPage article content, render the NewsletterSignup component with an email input and 'Subscribe' button. On submit, call a server action that POSTs the email to a Resend audience using RESEND_API_KEY from the Vars panel. Add basic email validation with a regex check before the server action is called. Show a 'You're subscribed!' confirmation message inline (no page reload). Validate the RESEND_API_KEY is set before showing the form — if it's missing, hide NewsletterSignup entirely.
Add instant post search with CommandDialog
Adds a Cmd+K-triggered post search dialog using shadcn/ui CommandDialog with client-side filtering.
Add a keyboard-triggered search feature to BlogHeader. When the search icon is clicked or the user presses Cmd+K, open a shadcn/ui CommandDialog. The dialog should search post titles and excerpts from a static JSON array of all posts (generate this array at build time from the MDX frontmatter). Render matching PostCard-style previews in the dialog results. Clicking a result should navigate to the full PostPage at /blog/[slug] and close the dialog. All filtering is client-side — no server round-trip.
Persist newsletter subscribers in Supabase with admin page
Adds Supabase-backed subscriber storage, Resend sync, and a password-protected admin view to manage your newsletter list.
Create a Supabase table named 'subscribers' with columns: id (uuid default gen_random_uuid()), email (text unique), source (text default 'blog'), created_at (timestamptz default now()). Update the NewsletterSignup server action to insert into this table using SUPABASE_SERVICE_ROLE_KEY. Also call the Resend API to add the email to an audience list. Add an RLS policy so only the service role can insert and read rows. Build a hidden admin page at app/admin/subscribers/page.tsx that fetches all subscriber rows from Supabase server-side and displays them in a table with email and signup date. Protect the page by checking an ADMIN_PASSWORD env var in a server action on a gated login form.
Gotchas when you extend it
The failures people actually hit when they push this template past its defaults — and the exact fix for each.
MDX content not found in production — posts return 404 or throw ENOENT errorsWhy: Next.js static file serving only applies to the public/ directory. MDX files in content/posts/ must be read with fs.readFile using an absolute path from process.cwd() — a relative path works in development but resolves incorrectly on Vercel.
Fix: Update the posts loader to build the directory path with path.join(process.cwd(), 'content/posts') so it resolves correctly in both development and the Vercel build environment.
Update the posts loader to use: const postsDir = path.join(process.cwd(), 'content/posts') so it resolves correctly in both development and Vercel production
`Hydration error: text content does not match server-rendered HTML` on PostPage datesWhy: date-fns formats dates based on the system locale, which differs between the Vercel server (UTC) and the user's browser (local timezone). The formatted date string is different on each side, causing a React hydration mismatch warning or error.
Fix: Import enUS from date-fns/locale and pass { locale: enUS } as the third argument to every format() call. This pins the locale on both server and client.
Import { enUS } from 'date-fns/locale' and add { locale: enUS } to every date-fns format() call to ensure consistent server/client renderingTagCloud shows the same placeholder count for all tags instead of real per-tag countsWhy: The template may initialize TagCloud with static placeholder data rather than computing counts from actual post frontmatter. The counts don't update when new posts are added.
Fix: Parse all MDX frontmatter at build time and compute tag counts with a reduce call across all posts' tags arrays.
Update the TagCloud data source to compute tag counts: const tagCounts = posts.reduce((acc, post) => { post.tags.forEach(tag => acc[tag] = (acc[tag] || 0) + 1); return acc }, {})Template vs. custom — the honest call
A forked template gets you far, fast. Here's where it holds up, and where you'll outgrow it.
The template is enough when
- You want a clean developer blog live within a day with MDX post support and no design overhead
- The standard shadcn/ui aesthetic works with your brand after a color tweak in Design Mode
- You write technical content and MDX (code blocks, callouts, embedded components) covers your format needs
- You're the sole author and don't need a CMS or collaborative editing
Go custom when
- You need multiple authors with individual profile pages and role-based content access
- You want server-side full-text search with Postgres FTS or Algolia rather than client-side filtering
- Your content workflow requires a visual editor (Notion, Sanity, Contentful) for non-technical co-authors
- You need custom article types beyond standard blog posts — changelogs, tutorials, case studies with distinct layouts
RapidDev can add a Supabase-powered CMS, newsletter integration with Resend, and search to this blog template — making it a complete personal brand platform.
Frequently asked questions
Is the Personal Dev Blog template free?
Yes. The template is free to fork on v0.dev. V0's free tier gives you enough credits to personalize it. Vercel hosting is free for personal projects. Resend has a free tier (3,000 emails/month), and Supabase has a free tier (2 projects, 500MB database) for the newsletter features.
Can I use this blog template commercially?
Yes. V0 community templates are available for commercial use with no attribution required. You own all the code you fork and any content you create. Running ads or affiliate links on the blog is permitted.
Why does my fork show a hydration error on post dates in preview?
date-fns formats dates using the system locale, which differs between the Vercel server (UTC) and your browser. Import enUS from date-fns/locale and pass { locale: enUS } to every format() call. This pins the locale on both sides and eliminates the mismatch. The exact fix prompt is in the gotchas section.
How do I write actual blog posts — can I do it inside V0?
You can't write .mdx files directly inside V0. Connect your GitHub repo via the Git panel, pull the repo locally, and add .mdx files to the content/posts/ directory. Each file needs frontmatter: title, date, description, and tags. Push to GitHub to trigger a Vercel redeploy.
My MDX posts work locally but return 404 on Vercel. What's wrong?
The posts loader is likely using a relative file path that works in development but not in the Vercel build environment. Change the directory resolution to path.join(process.cwd(), 'content/posts'). The exact fix is in the gotchas section above.
How do I activate the NewsletterSignup component?
Add your RESEND_API_KEY to the V0 Vars panel (sidebar → Vars). Then use the 'Add newsletter signup to PostPage' prompt from the prompt pack to wire the server action. After deploying, subscribe emails will be sent to your Resend audience.
Can RapidDev add a full CMS or search to this blog?
Yes. RapidDev can add a Supabase-backed CMS so you can publish posts from a web interface, wire Resend newsletter automation, and add full-text Postgres search — turning this template into a complete content platform.
The TagCloud shows wrong counts. How do I fix it?
The template uses placeholder tag counts by default. Update the TagCloud data source to compute counts from real post frontmatter at build time using a reduce across all posts' tags arrays. The fix prompt in the gotchas section is copy-paste ready.
Outgrowing the template?
RapidDev turns v0 prototypes into production apps — real auth, database, and payments — at $13K–$25K.
Book a free consultation30-min call. No commitment.