Convert to Next.js App Router with React Server Components

[mattmontgomery]

Summary

• Migrate from Pages Router to App Router pattern for modern Next.js architecture
• Convert pages/_app.tsx to app/layout.tsx with client-side providers
• Implement React Server Components for better performance and SEO
• Add async server exports with generateMetadata for optimal CDN compatibility
• Convert API routes to new App Router format with proper async/await patterns
• Update navigation hooks from next/router to next/navigation
• Add Suspense boundaries for client components using hooks
• Preserve original Pages Router code in pages-old.bak for reference

Key Benefits

• Improved Performance: React Server Components reduce client-side JavaScript
• Better SEO: Dynamic metadata generation with generateMetadata
• Enhanced Caching: Optimized for CDN deployment and edge caching
• Future-proof: Uses latest Next.js 15+ patterns and best practices
• Reduced Bundle Size: Server components minimize client-side code

Technical Changes

• Created new app/ directory structure with layout.tsx and page.tsx files
• Converted _app.tsx logic to client-side providers component
• Updated router usage from useRouter (Pages) to useRouter/usePathname (App)
• Added "use client" directives for components using React hooks
• Implemented proper TypeScript types for App Router params (Promise<>)
• Added Suspense boundaries to prevent hydration issues

Test Plan

• Application builds successfully with new App Router structure
• TypeScript compilation passes without errors
• ESLint validation passes
• Basic navigation and routing works
• All existing pages render correctly
• API routes function properly
• Performance metrics show improvement
• SEO metadata renders correctly

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
formguide	Ready	Preview	Comment	Sep 29, 2025 9:03pm