[proposal]: Rewrite in Next.js App Router

[IncognitoTGT]

Summary

Quran.com currently uses Next.js Pages router on Next.js 12, which is an outdated version. The Pages Router is also not the latest routing method for Next.js and is missing some features that I think would make the website better, faster, and also simplify the development workflow.

Next.js App Router has a couple benefits, such as:

• Less JS loaded per page
• Less confusing routing, and simplified data fetching (directly in the react component, instead of a seperate function)
• Fully SSR'd pages for less resource intensive pages, requiring less JavaScript
• Less API routes and simpler form submissions. now has a action prop that gets FormData passed as an argument, and you can use server actions (JS functions that can be executed from the server and called from the client) instead of extra API routes
• Component streaming, allowing components be partially loaded and get sent to the client faster.

And other things:
https://nextjs.org/blog/next-13

https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration

[oubrax]

Trust me, Rewriting from pages to app takes a LOT of time, for some benefits, i'd rather use that time to add more features to the app

[IncognitoTGT]

a gradual migration of pages, and making all new pages app router would help with that