feat: migrate to Next.js 15, React 19, and Tailwind CSS 4

[hellodun]

Summary

This PR upgrades the entire project from Next.js 13.4.9 to the latest modern architecture, fixing anti-patterns along the way and bringing all dependencies to their current major versions.

Dependency upgrades

• next 13.4.9 → 15.x (Turbopack enabled for dev)
• react / react-dom 18.2.0 → 19.x
• tailwindcss 3.3.3 → 4.x
• next-themes 0.2.1 → 0.4.4 (React 19 support)
• lucide-react 0.260 → 0.474
• eslint 8 → 9, typescript 5.1 → 5.7
• Move type defs and dev tools to devDependencies

Config file migrations

• next.config.js → next.config.ts (typed NextConfig)
• tailwind.config.js deleted — custom theme colors now live in globals.css via the Tailwind v4 @theme directive
• postcss.config.js updated to use @tailwindcss/postcss
• .eslintrc.json → eslint.config.mjs (ESLint 9 flat config)
• tsconfig.json: target es5 → es2017, moduleResolution node → bundler

Tailwind class renames

Tailwind CSS 4 @theme generates kebab-case utility names. All custom color classes updated across components:

• primaryLight → primary-light
• secondaryLight → secondary-light
• primaryDark → primary-dark
• secondaryDark → secondary-dark

Mobile menu refactor

MenuButton.tsx and MobileMenu.tsx used document.getElementById / classList to communicate — a React anti-pattern. Replaced with a single MobileNav.tsx client component that manages visibility via useState and cleans up a resize listener via useEffect.

Component and module fixes

• Links.tsx split into two files: Links.tsx (server-safe plain data) and NavLinks.tsx (client component with JSX icons), properly respecting the Next.js 15 server/client module boundary
• Sidebar.tsx marked "use client" since it renders client-provided JSX from NavLinks.tsx
• providers.tsx — JSX.Element → ReactNode (global JSX namespace removed in React 19)
• FooterNote.tsx — hardcoded 2023 → {new Date().getFullYear()}
• lib/styles.ts created to hold childrenCommonStyles, removing a circular import from the layout file
• suppressHydrationWarning removed from <main> (was masking the now-fixed DOM anti-pattern)

Cleanup

• Removed unused public/next.svg and public/vercel.svg
• Updated README.md with current tech stack, full project structure, and getting-started instructions

Test plan

• npm install completes without errors
• npm run build compiles and statically generates all routes
• npm run lint reports no warnings or errors
• npm run dev starts Turbopack dev server on localhost:3000
• All 4 pages render correctly
• Dark/light theme toggle works on desktop and mobile
• Mobile menu opens, closes on button click, link click, and resize to desktop width
• Footer shows current year dynamically
• No hydration warnings in the browser console

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
duncan-site-5lx1	Ready	Preview, Comment	Mar 24, 2026 9:24am