dotCMS + Next.js: Migrate Header, Footer & Dynamic Navigation | Part 02

🔄 Time to bring your vibe-coded portfolio to life with a real CMS backend! In this video, we take the Google AI Studio-generated portfolio site and migrate it piece by piece into our Next.js headless app powered by dotCMS — starting with the Header, Navbar, and Footer. 📌 What's covered: ✅ Installing missing deps — framer-motion & lucide-react ✅ Copying global styles from vibe-coded site to Next.js globals.css ✅ Migrating Navbar component to Next.js (usePathname, next/link, use client) ✅ Migrating Footer component with Lucid React icons ✅ Rendering dynamic navigation links from dotCMS pages ✅ "Show on Menu" toggle — publishing pages to nav without code changes ✅ Sorting nav items using the dotCMS Sort Order property 💡 The best part? Add, reorder, or remove navigation pages directly from dotCMS — zero code changes, zero redeployments! 🔗 Links: • dotCMS Admin (local): http://localhost:8082/admin 📂 Playlist: dotCMS Headless: Zero to Launch — Build Your First Portfolio Site ⬅️ Previous: Setting up the Project (dotCMS + Next.js) | Part 01 ⭐ Like & Subscribe for the next part where we build the Hero Section in dotCMS! #dotCMS #NextJS #HeadlessCMS #VibeCoding #PortfolioSite