[FEAT][GLOBAL]: Migrate From React to Next.js 14 with Modular CSS

[RajVarsani]

Background and Motivation

The current codebase utilizes native React.js, which, as the project scales, is becoming increasingly difficult to manage and optimize. To improve the performance, scalability, and maintainability of our web application, we propose a migration of the codebase to Next.js 14 coupled with a transition to modular CSS. Next.js offers several benefits including automatic routing, built-in image optimization, server-side rendering (SSR), static site generation (SSG), and API routes. Modular CSS will help isolate styles, preventing unexpected conflicts and cascading issues, and promote reuse of styles across components.

Task Description

• Migrate the entire current React.js codebase to Next.js 14.
• Refactor the styling approach to use modular CSS, ensuring styles are scoped to individual components to prevent global namespace pollution.
• Test all components and pages to ensure they are functioning correctly with Next.js and modular styles without visual or functional regressions.
• Update any necessary build and deploy scripts to accommodate Next.js’s build process.

Goals

• Enhance the application's performance, SEO, and user experience by leveraging Next.js features.
• Improve CSS maintainability and reduce style conflicts by implementing modular CSS.

Challenges

• Addressing potential mismatches between React.js and Next.js in terms of project structure and SSR capabilities.
• Migrating existing global styles to a modular architecture without impacting the user interface.

Dependencies

• Installation of the Next.js framework and necessary plugins or packages.
• A thorough review of the existing component library to ensure compatibility with modular CSS.

Expected Outcome

A successfully migrated codebase to Next.js 14 with modular CSS that passes all tests and performs optimally with improved code maintainability and no regressions in functionality or appearance

Resources:

• https://nextjs.org/learn/react-foundations/from-react-to-nextjs
• https://github.com/css-modules/css-modules?tab=readme-ov-file