Next.js Portfolio Setup Guide
A practical guide to setting up a Next.js portfolio from scratch — routing, animations, dark mode, and deployment.
Setting up a portfolio doesn't have to be complicated. Here's the setup I landed on after trying everything else.
Why Next.js
App Router gives you file-based routing for free. TypeScript support is first-class. Deployment on Vercel is one click.
The Tech Stack
- Next.js 15 with App Router - Tailwind CSS v3 for styling - motion/react for animations - Lucide for icons - localStorage for content management
Animation Strategy
Two patterns cover 90% of portfolio animations: 1. Page entry: useInView + opacity/translateY reveal 2. Stagger: variants with staggerChildren
Content Management
I use localStorage + a hidden /admin route to manage content without a CMS. It's not elegant, but it works perfectly for a personal site where you're the only editor.