Rewriting My Blog from WordPress to Next.js with Vibe Coding

Update 2025-10-18: It's only been 3 months and this article seems like it was written years ago. With the claude-sonnet-4.5 model which you can use in Claude Code, or Cursor IDE agents can create the blog in one shot.

Introduction

About 2 months ago, I decided it was time to move my personal blog from wordpress to nextjs while challenging myself to see how fast I can complete the whole process using Vibe coding. The whole process including data migration and deployment took me something in the range of 15 to 20 hours. Here’s how I did it.

Tools at a Glance

• WordPress-to-Hugo Exporter (github.com/SchumacherFM/wordpress-to-hugo-exporter)
• Cursor IDE with a custom Senior Frontend Engineer AI agent • Next.js (app router) + Markdown • Vercel for CI/CD and hosting (free tier)

The Migration

Step 1: Exporting Content from WordPress

Instead of wrestling with the default XML exporter, I used SchumacherFM’s wordpress-to-hugo-exporter. It converted my posts into clean Markdown files, each with front-matter metadata (title, date, tags, featured image, etc.). Setup was straightforward:

Clone the repo.
Install dependencies and point it at my WP database.
Run the export command to output a folder of .md files.

Step 2: Bootstrapping a Next.js Project with Cursor IDE

I spun up Cursor IDE and created a “vibe coding” agent that understands Next.js file conventions. With simple prompts like “Generate a /app/blog/[slug]/page.tsx using MDX and frontmatter,” the agent:
• Created the dynamic route.
• Integrated gray-matter for frontmatter parsing.
• Added getStaticPaths and getStaticProps equivalents in the app router.
• Pulled in a basic layout component and syntax highlighting.

I barely typed any JSX - I just prompted and reviewed. Within an hour, I had a functional blog scaffold.

Step 3: Integrating Markdown Content

I committed the exported Markdown folder under /content/blog. Then I updated my Cursor agent prompts to:
• “Read all .md files from /content/blog, sort by date, and render a listing on /app/blog/page.tsx.”
• “Extract front-matter fields for SEO tags in <head>.”

Each time I tweaked the prompt, the agent regenerated the code in seconds. I fine-tuned styles in a global CSS module and added Tailwind for quick utility classes.

Step 4: Adding Flair with Custom AI Agent Tasks

Beyond scaffolding pages, my Cursor agent handled:
• Generating social-share images via a simple React component.
• Writing robots.txt and sitemap.xml with dynamic routes.
• Crafting metadata for Open Graph and Twitter cards.

Because the agent lives in my IDE, I invoke it with comments like generate sitemap, and I get a ready-to-commit file.

Step 5: Building custom plugins

I created custom plugins to load youtube video player and gallery of images into my articles.

Step 6: Deployment on Vercel

With the code in GitHub, I connected the repo to Vercel:
• Automatic builds on every push to main.
• Environment variables (if needed) stored securely in Vercel’s dashboard.
• Instant previews for pull requests-perfect for reviewing layout tweaks before merging.

Improvements

I went from a wordpress blog to a nextjs blog that gets 100 score from lighthouse extremely fast. Once the build finishes, my new Next.js blog is live under the same custom domain as before. I don't have to pay for a web host or a media platform anymore. I do not need to deal with a database, or a publishing tool, just a simple markdown file.

Lighthouse screenshot of performance of my website

Lessons Learned

• Leverage existing export tools: The WordPress-to-Hugo exporter saved me days of manual migration.
• AI-powered IDEs are here to stay • Keep content and code separate: A /content folder of Markdown files is more portable than a database.
• Combination of Github + Nextjs + Vercel is amazing for deployment and spped

Conclusion
Switching from WordPress to Next.js with a vibe-coding approach was easier than I imagined. By combining a proven exporter, AI-driven scaffolding in Cursor IDE, and Vercel’s seamless CI/CD, I rewrote my blog with almost zero hand-crafted code. If you’re craving performance, flexibility, and a workflow that scales with your creativity, give this approach a try. Happy coding!