Building a Full Stack Portfolio with Next.js 16

Building a portfolio as a developer is both exciting and surprisingly tricky. You want it to be fast, look great, and actually rank on Google. Here's how I, Abhishek Sharma, built mine from scratch as a full stack engineer.

Why Next.js?

Next.js gives you the best of both worlds — static generation for performance and server rendering when you need dynamic data. For a portfolio + blog, this is ideal:

• The homepage is fully static (blazing fast)
• Blog posts are statically generated at build time
• The contact form uses a serverless API route

As someone who works extensively with React and Next.js, this was the natural choice for my stack.

The Tech Stack

Here's the technologies I use:

Setting Up MDX

The simplest way to add a blog to a Next.js app is MDX — write markdown, push to git, and it's live.

npm install @next/mdx @mdx-js/loader @mdx-js/react gray-matter reading-time

Each post is just a .mdx file with frontmatter:

---
title: "My Post Title"
excerpt: "A short description shown on the blog listing page."
publishedAt: "2026-05-11"
categories: ["React"]
tags: ["react", "tips"]
---

Your post content goes here in **markdown**.

Performance Optimizations

A few things I did to get a 100 Lighthouse score:

• Used next/font for zero-layout-shift fonts
• Set optimizePackageImports for lucide-react and framer-motion
• All blog pages are statically generated with generateStaticParams
• Images are served via Next.js Image component with correct dimensions

These optimizations are reflected in the performance of my projects and the overall site experience.

SEO & GEO

Every blog post automatically gets:

1. Dynamic <title> and <meta description> from frontmatter
2. Open Graph image auto-generated with ImageResponse (no image files needed)
3. JSON-LD structured data for Google rich results and AI crawlers
4. Canonical URL to prevent duplicate content issues
5. Sitemap generated on every build via next-sitemap

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Building a Full Stack Portfolio with Next.js 16",
  "author": {
    "@type": "Person",
    "name": "Abhishek Sharma"
  }
}

Deploying to Vercel

Push to GitHub, connect to Vercel, add your environment variables. Done. Every git push triggers a new deploy with a fresh sitemap.

Conclusion

The MDX + Next.js combo is honestly the cleanest developer blog setup I've found. No CMS to manage, no API keys to configure, no third-party service to worry about going down. Just write, commit, push.

If you're interested in working together, feel free to get in touch or check out my experience building production web applications.