Building a Modern Personal Website with Next.js

Building a personal website in 2025 doesn't have to be complicated. With the right tools, you can create something that's fast, beautiful, and easy to maintain.

Why Next.js?

Next.js has become the go-to framework for React developers, and for good reason. It provides:

Server Components that reduce client-side JavaScript
Static Site Generation for blazing-fast page loads
Built-in SEO support with the Metadata API
Image optimization out of the box
App Router with nested layouts

The best framework is the one that gets out of your way and lets you focus on building.

The Tech Stack

For this project, I chose a minimal but powerful stack:

| Technology | Purpose | |-----------|---------| | Next.js 15 | Framework | | Tailwind CSS 4 | Styling | | MDX | Blog content | | Framer Motion | Animations | | Vercel | Deployment |

Setting Up the Project

Getting started is straightforward. Create a new Next.js project with TypeScript and Tailwind CSS:

npx create-next-app@latest my-site --typescript --tailwind --app

This gives you a solid foundation with all the tooling configured and ready to go.

Design Principles

I follow a few key principles when designing personal sites:

High contrast — Black background, white text, accent colors
Minimal UI — Only show what matters
Fast loading — Every millisecond counts
Responsive — Works perfectly on any device

Content with MDX

MDX is a game-changer for developer blogs. You get all the simplicity of Markdown with the power of React components embedded directly in your content.

This means you can create interactive examples, custom callouts, and rich media experiences without leaving your content files.

What's Next

In future posts, I'll dive deeper into:

Optimizing Core Web Vitals
Building a custom MDX component library
Adding search functionality
Implementing analytics without sacrificing privacy

Stay tuned for more!