Convert Design System from React to Next.js

[guilhermesalviano]

As part of our ongoing efforts to improve the performance and developer experience of our project, we are considering migrating from a traditional React setup to Next.js.

Next.js offers several advantages over a traditional React setup, including:

• Server-side rendering (SSR) out of the box, which can improve performance and SEO.
• Automatic code splitting, which can make the app load faster.
• Simplified routing, with support for dynamic routes.
• Built-in CSS and Sass support, and support for any CSS-in-JS library.
• Development environment which supports Hot Module Replacement.
• API routes to build API endpoints with Serverless Functions.

Tasks:

• Set up a new Next.js project.
• Migrate existing components and state management to Next.js.
• Update routing to use Next.js's file-based routing system.
  • https://nextjs.org/docs/app/building-your-application/routing/colocation
• Test the application to ensure all features still work as expected.(storybook)
• Update the build and deployment process to work with Next.js.

Acceptance Criteria:

• The application runs correctly with Next.js.
• All existing features work as expected.
• The build and deployment process works with the new Next.js setup.