refactor: Migrate to Next.js App Router

[eduramme]

Migrate to Next.js App Router

Description

Our application is currently using the Pages Router in Next.js. To take advantage of the latest features and improvements, we should migrate to the App Router. This migration will modernize our codebase, align with best practices, and enable features such as:

• Improved server components support
• Enhanced routing flexibility
• Built-in layouts and nested routing
• Streaming and suspense capabilities

Tasks

1. Analyze Current Implementation

   • Identify all pages and components currently relying on the Pages Router.
   • Document dependencies and potential areas of complexity during migration.

2. Plan the Migration

   • Define folder structure for the App Router (e.g., app/ directory).
   • Plan a phased migration strategy, if possible, to reduce downtime.

3. Implement App Router

   • Refactor components and pages to adhere to the App Router structure.
   • Ensure new routing conventions, such as nested layouts and loaders, are applied.

• New features of the App Router are leveraged where applicable.

Additional Notes

• Refer to the Next.js App Router documentation for detailed guidance and best practices.
• Ensure a backup branch is maintained until migration is complete and stable.

---

Feel free to suggest adjustments or add further details to ensure a smooth migration process!