How I Built My Portfolio with Next.js + SEO Best Practices

Building a developer portfolio that actually ranks on Google requires more than just good code. In this guide, I'll walk you through how I built nafiesallahu.com using Next.js 15 and implemented SEO strategies that improved my search rankings.

Why Next.js for SEO?

Next.js App Router provides built-in SEO features that make it easier to rank:

- Automatic sitemap generation

- Built-in metadata API

- Server-side rendering for better crawlability

- Image optimization out of the box

Key SEO Implementation

1. Metadata Structure

export const metadata: Metadata = {

title: "Nafie Sallahu",

description: "Portfolio of Nafie Sallahu, React.js frontend engineer...",

keywords: ["Full Stack Developer", "React Developer", "Next.js"],

openGraph: { /* social sharing */ },

twitter: { /* Twitter cards */ }

}

2. Sitemap & Robots

// app/sitemap.ts

export default async function sitemap(): Promise {

return [

{ url: "https://nafiesallahu.com", priority: 1 },

{ url: "https://nafiesallahu.com/blog", priority: 0.7 }

]

}

3. Core Web Vitals Optimization

- Used `next/image` for automatic WebP/AVIF conversion

- Implemented lazy loading for non-critical images

- Added explicit width/height to prevent layout shifts

- Optimized font loading with `display: swap`

Results

After implementing these SEO strategies:

- Core Web Vitals improved from 65 to 92

- Sitemap properly indexed by Google

- Rich snippets appearing in search results

- Better ranking for "React developer Kosovo" keywords

Next Steps

1. **Content Strategy**: Regular blog posts targeting your niche

2. **Internal Linking**: Connect related content across your site

3. **Performance Monitoring**: Use Google Search Console to track improvements

4. **Backlink Building**: Share your content in developer communities

The key is consistency - SEO is a long-term game, not a one-time setup.