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

Question

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.

Answer 1

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

Answer 2

Aspect	App Router	Pages Router
Structure	Modular and organized with app/ directory	Traditional, file-based routing with pages/ directory
Routing	Advanced routing with flexibility, parallel routing, and layouts	Automatic routes based on file structure
Components	Supports both Client and Server Components	Primarily client-side components
Layouts	Easy and nested layouts using layout.tsx	Managed via _app.js
Server Actions	Allows executing server-side code based on client-side events	Not available
SEO	Built-in SEO with automatic metadata handling	SEO managed via next/head
Data Fetching	Uses React Server Components and modern data-fetching techniques	Uses getStaticProps, getServerSideProps, getStaticPaths
Learning Curve	Steeper, with more advanced concepts	Easier for beginners, more intuitive
Flexibility	High flexibility, better for complex applications	Less flexible, better for simpler projects
Usage Recommendation	Best for new projects or those needing advanced features	Suitable for older projects or simpler use cases
Scalability	Highly scalable with support for complex architectures	Sufficient for many applications but less scalable
SEO Optimization	Enhanced built-in SEO features	Requires manual configuration with next/head
Parallel Routing	Supported, allowing multiple pages to render on the same URL	Not supported
Intercepting Routes	Supports route interception for conditional rendering	Not supported
Custom Document	Managed through layout.tsx	Managed through _document.tsx
Pro Tip	Can use both routers, but app routes take priority	Typically, use one router to avoid confusion

Source: https://medium.com/@jawaragordon/choose-your-own-adventure-next-js-app-vs-pages-router-528dbf25b37f