javascriptreactjsnext.js

Can i use both /app and /pages folder on my Next 13 app?


The full detail is that I’m working on a project that is using the /app folder as its main route container but we’ve been having performance issues on localhost due to some memory leaks described on an issue on the Next js repo. I want to know if I can build new sections of the project (without conflicting routes, of course) in the /pages folder and even use typescript because the existing project is built with JavaScript.


Solution

  • According to NextJs documentation, you can use both /app and /pages folders.

    However, /app is kind of the updated version of the /pages folder, the default folder in Next JS 13. In their documentation, they describe the following:

    The App Router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption. This allows you to opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior. If your application uses the pages directory, please also see the Pages Router documentation.

    It leads us to understand that at this point the /pages folder is supported as a way to migrate to the new /app folder. Also, they mention:

    The App Router takes priority over the Pages Router. Routes across directories should not resolve to the same URL path and will cause a build-time error to prevent a conflict.

    I would say that technically you can use both, but I think you shouldn't.

    You can visit this page for more info: Routing Fundamentals