How to Build a Next.js Portfolio (Step by Step, 2026)

How do you build a Next.js portfolio?

Build a Next.js portfolio by scaffolding an App Router project, structuring routes for your home and project pages, serving images through next/image, adding SEO with the Metadata API, and deploying to Vercel with one command. The framework gives you fast, server-rendered pages by default — you just fill in your work. Here’s the step-by-step, and where a template saves you the setup.

Step 1 — Scaffold the project

npx create-next-app@latest my-portfolio
# choose: App Router, TypeScript, Tailwind (optional)
cd my-portfolio && npm run dev

Step 2 — Structure your routes

app/
  page.tsx            // home: hero + selected work
  projects/
    page.tsx          // all projects
    [slug]/page.tsx   // one project case study
  components/
    Hero.tsx  ProjectCard.tsx

The App Router renders these on the server by default, so your content is in the HTML that crawlers and AI engines read — the foundation of the portfolio’s SEO.

Step 3 — Optimize images with next/image

import Image from 'next/image'
<Image src="/work/app.webp" alt="Project dashboard"
  width={1200} height={800} priority />

Use priority on the hero image so it preloads (it’s your Largest Contentful Paint element), and let next/image handle sizing and modern formats for the rest.

Step 4 — Add SEO with the Metadata API

export const metadata = {
  title: 'Sam Rivera — Front-End Engineer',
  description: 'Fast, accessible React apps. Selected work and case studies.',
  alternates: { canonical: 'https://samrivera.dev' },
}

Per-page titles, descriptions and canonicals in code — no plugin. Add a sitemap.ts and you’ve covered the technical basics.

Step 5 — Write the case studies

Each project page follows the same arc: problem, approach, result, links. This is the content that wins interviews and clients; spend more time here than on animation.

Step 6 — Deploy

npm i -g vercel && vercel
# or push to GitHub and import into Vercel

You get HTTPS, a global CDN, and automatic deploys on every push. Add your custom domain, and you’re live.

Performance checklist before you ship

• Hero image uses next/image with priority.
• Fonts loaded via next/font (no layout shift).
• Server Components by default; 'use client' only where needed.
• Run PageSpeed Insights on mobile and fix the top issues.

Prefer to skip the setup? Our Next.js portfolio templates — NextGenAppsPro and the designer-focused Grafik V2 — ship with this structure and optimization already in place.

Which rendering method for which page?

Next.js portfolio templates to start from

Frequently asked questions

Is Next.js good for a portfolio?

Yes. It gives you fast, server-rendered pages, built-in image and font optimization, and native SEO through the Metadata API — everything a portfolio needs to load fast and rank.

Do I need a backend for a Next.js portfolio?

Usually not. A portfolio is mostly static content, so you can render pages at build time and deploy as a fast static/SSR site with no separate backend.

How long does it take to build a Next.js portfolio?

A weekend from scratch if you write your case studies first, or an evening starting from a template. The content takes longer than the code.