Build a Fast Next.js Portfolio (App Router, next/image, Deploy)

A Next.js portfolio is the best React project you can ship — it teaches routing, images, metadata, and deployment, and you end up with something you'll actually use. Here's the whole build.

Scaffold + structure

npx create-next-app@latest my-portfolio  # App Router
app/
  page.tsx            // home
  projects/[slug]/page.tsx
  components/Hero.tsx

App Router = server-rendered by default, so your content is in the HTML crawlers read.

Images + SEO (the two most-skipped bits)

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

export const metadata = {
  title: 'Sam Rivera — Front-End Engineer',
  alternates: { canonical: 'https://samrivera.dev' },
}

priority on the hero (it's your LCP). Metadata API for titles/canonicals, no plugin.

Deploy

npm i -g vercel && vercel

HTTPS, CDN, auto-deploys on push. Add a domain, done.

Before you ship

next/image + priority hero, next/font, Server Components by default, PageSpeed on mobile.

Want a head start? NextGenAppsPro ships this structure ready.

Building yours from scratch or a template? 👇