Why I Chose Next.js for My Portfolio in 2026

After 10 years in web development, I've seen many frameworks come and go. Every year there's "the new framework that changes everything." However, for my portfolio in 2026, I chose Next.js 15+. Here's why.

The Complete Stack

My portfolio uses:

Next.js 15 with App Router
Velite for processing MDX
Tailwind CSS for styles
TypeScript for static typing
Vercel for deployment

Why Not Astro

Astro is excellent for static sites. Its "zero JavaScript by default" approach is tempting. But my portfolio needs interactivity: dynamic filters, Framer Motion animations, and React components I already know well.

// In Next.js I can mix Server Components with interactivity
export default async function ProjectsPage() {
  const projects = await getProjects(); // Server Component
 
  return (
    <ProjectFilter projects={projects}>
      {" "}
      {/* Client Component */}
      {projects.map((p) => (
        <ProjectCard key={p.slug} {...p} />
      ))}
    </ProjectFilter>
  );
}

With Astro I would have to maintain two mental models: Astro components and React components. Next.js lets me use React everywhere.

Why Not Remix

Remix has brilliant ideas about forms and loaders. But for a portfolio:

I don't need complex forms - A portfolio is mostly reading
The Next.js ecosystem is more mature - More components, more tutorials, more solutions
Vercel + Next.js = trivial deployment - A git push and done

The Real Advantages of Next.js 15

1. Server Components by Default

React Server Components changed everything. My projects page loads data on the server, with no state on the client:

// app/projects/page.tsx
import { projects } from "@/.velite";
 
export default function ProjectsPage() {
  const featured = projects.filter((p) => p.featured);
 
  // This runs on the server
  // Zero JavaScript sent for this logic
  return <ProjectGrid projects={featured} />;
}

2. Velite for MDX

Velite is incredible. It converts my MDX files into typed data that I can import directly:

import { posts } from "@/.velite";
 
// TypeScript knows exactly what fields each post has
const latestPosts = posts
  .filter((post) => post.published)
  .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
  .slice(0, 5);

3. Image Optimization

The next/image component remains the best in the market:

<Image
  src={project.image}
  alt={project.title}
  width={800}
  height={400}
  className="rounded-lg"
  priority={project.featured}
/>

Lazy loading, automatic WebP/AVIF format, and responsive images with no additional configuration.

4. Metadata API

SEO is critical for a portfolio. Next.js makes it declarative:

export async function generateMetadata({ params }): Promise<Metadata> {
  const project = projects.find((p) => p.slugAsParams === params.slug);
 
  return {
    title: project?.title,
    description: project?.description,
    openGraph: {
      images: [project?.image || "/og-default.jpg"],
    },
  };
}

What Could Be Improved

Next.js isn't perfect:

Long build times - With many MDX files, Velite can take a while
App Router complexity - The learning curve is real
Vendor lock-in with Vercel - Although it works on other hosts, Vercel has advantages

Conclusion

For a developer portfolio in 2026, Next.js remains my choice because:

I know React - I don't have to learn a new paradigm
The ecosystem is mature - Solutions for everything
Server Components - Performance without sacrificing DX
TypeScript first - Velite + Next.js = end-to-end typing

Could I have used Astro? Yes. Remix? Also. But with Next.js, I was able to build exactly what I wanted in less time, with less frustration, and with confidence that it will scale when I need it.

The best framework is the one you know well and that lets you ship.

WhyIChoseNext.jsforMyPortfolioin2026