If you want a personal blog that ranks on Google, your technology choice matters more than most developers admit.
This blog runs on Next.js. Not because it is trendy, but because it is the only framework I know that gives you static performance, full SEO control, and a modern developer experience in one package without fighting the framework to get there.
Here is why I chose it and why I would choose it again.
The Core Problem With Most Blog Stacks
Most personal blogs are either too slow or too rigid.
WordPress is the default choice for bloggers. It powers 43 percent of the web. It also loads slowly, requires constant plugin updates, is vulnerable to security exploits, and needs a server running PHP at all times. A WordPress blog on shared hosting often scores Lighthouse performance numbers in the 40s and 50s. That directly hurts SEO.
Ghost is cleaner and faster than WordPress but you pay monthly for hosting and you are limited to Ghost's content management system. You cannot bring in custom data, custom pages, or complex layouts without fighting the platform.
Static site generators like Jekyll and Hugo build fast sites but require you to write everything in markdown and push to GitHub every time you want to publish. No CMS, no visual editor.
Next.js sits in a different category. It is a React framework that can export fully static HTML, connect to any content source, integrate a headless CMS, and still feel like a normal web application.
Why Static Generation Is the Right Choice for SEO
When Google crawls your site, it fetches HTML. If that HTML requires JavaScript to render, Google's crawler has to execute JavaScript, wait for it to finish, and then index the output. This process is unreliable and slower than indexing pre-rendered HTML.
Static generation means Next.js renders every page to HTML at build time. When Google visits /articles/my-post, it gets a complete HTML file back immediately. No JavaScript execution required. Crawling is fast, indexing is reliable, and your pages get indexed without delay.
In Next.js, any page that uses generateStaticParams is statically generated. Every article on this site is a static HTML file built at deploy time.
export async function generateStaticParams() {
const articles = getAllArticles();
return articles.map((article) => ({ slug: article.slug }));
}
That one function tells Next.js to pre-render a page for every article slug. The result is a site where every article URL returns HTML in under 50 milliseconds.
Built-In Image Optimization
Images are one of the biggest performance killers on blogs. Raw images from a camera or design tool are often 3 to 8 MB. Serving those to mobile users is slow. Slow pages have higher bounce rates. High bounce rates are a negative ranking signal.
Next.js delivers the <Image> component, which automatically:
- Converts images to WebP or AVIF (smaller file size, same quality)
- Serves the correct image size for each device screen width
- Lazy loads images below the fold
- Prevents layout shift with explicit width and height
You do not configure any of this. You swap <img> for <Image> and the optimization happens automatically.
Full Control Over Every SEO Tag
Next.js gives you a metadata API that handles title tags, meta descriptions, Open Graph tags, Twitter Cards, canonical URLs, and JSON-LD structured data. You can set global defaults in your root layout and override them per page.
export async function generateMetadata({ params }): Promise<Metadata> {
const article = getArticleBySlug(params.slug);
return {
title: article.title,
description: article.description,
alternates: { canonical: `https://yourdomain.com/articles/${params.slug}` },
openGraph: { type: 'article', publishedTime: article.date },
};
}
No plugin needed. No configuration in a dashboard. The SEO layer is code, which means it is version controlled, testable, and completely under your control.
Core Web Vitals Without Extra Work
Google's Core Web Vitals are the performance metrics that influence rankings:
- LCP (Largest Contentful Paint): How fast does the main content load?
- INP (Interaction to Next Paint): How responsive is the page to user input?
- CLS (Cumulative Layout Shift): How much does the layout jump around while loading?
A Next.js static site with the Image component and no heavy client-side JavaScript typically scores 95 to 100 on Lighthouse Performance. This blog scores 97 on mobile.
WordPress, even with caching plugins and image optimization plugins, typically scores 60 to 80 on the same test.
That gap in performance scores translates directly into ranking differences, especially on mobile, where Google's index is mobile-first.
The Deployment Model
Next.js deploys cleanly to Vercel in one step. Push to GitHub, Vercel builds and deploys automatically. Every article you publish triggers a new build. Preview deployments let you see changes before they go live.
Vercel's CDN serves your static files from edge locations worldwide. Users in Lagos, London, and Los Angeles all get fast load times because the HTML is cached close to them, not served from a single server in a US data centre.
The free Vercel tier is sufficient for a personal blog with moderate traffic.
The Verdict
Next.js is the right choice for a blog that wants to rank on Google if you are comfortable writing code. It is not a no-code solution. If you want to manage content through a visual editor without any technical setup, WordPress or Ghost serve that use case better.
But if you can write TSX and want full performance, full SEO control, and a modern content pipeline without paying for server infrastructure, Next.js is the answer.
For the SEO fundamentals that apply regardless of your technology stack, read the 10 things that actually matter for new bloggers.
