Next.js Front-End Performance Rebuild

Our current React front end works, but the Home page still repaints more times than it should and ties up the main thread on every state change. I want to migrate that layer to Next.js and use its hybrid rendering, built-in routing and code-splitting to squeeze every millisecond out of the first render while keeping user interactions buttery-smooth.

Scope
• Re-implement the existing Home page in Next.js, preserving all present UI/UX but rewriting components so they mount only once and update with minimal diffing.
• Replace our ad-hoc data-fetching with Next.js server-side props or the new App Router patterns to eliminate waterfall requests.
• Introduce dynamic imports, memoisation and selective revalidation so scrolling, tab switching and hover states remain responsive even under load.

Deliverables
• A Git branch containing the new Home page in a fresh, production-ready Next.js project (TypeScript preferred, but plain JS is fine if you justify the choice).
• Lighthouse and Web Vitals reports showing a measurable gain in Rendering Efficiency over the existing build.
• Brief README that explains setup, key optimisation decisions and next steps for migrating the rest of the site.

Acceptance criteria
1. First Contentful Paint and Largest Contentful Paint both improve by at least 25 %.
2. React DevTools shows no unnecessary re-renders during a typical scroll-and-click session.
3. Build passes yarn test and eslint without new errors.

If you have proven experience squeezing extra performance out of Next.js—especially on image-heavy landing pages—let’s get this moving.