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.

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

If you are creating a new Next.js application, I highly recommend using the /app folder. However, if you are upgrading an existing application that uses the /pages folder, you can continue to use that folder structure. Just know that the /app folder takes precedence, and using both in the same project will cause conflict if there is similar routes in the two.

I don't think you should mix these two routing machanisms together. You either use App Router or Pages Router. Even the documentation is separated to not mix these two:

For better undertanding the App Router I recommend you read this page.
https://nextjs.org/blog/next-13-4#nextjs-app-router

App Router is more flexible and is the recommended way. So if you created a new app stick to the App Router for sure even though I still think the examples and documentation related to it is not organised well on their website.

As per documentation you can only point to note dont create the Index.tsx file in the page folder

Otherwise it will throw conflict Error.

Good to know: Although you can use both routers in the same project, routes in app will be prioritized over pages. We recommend using only one router in your new project to avoid confusion.

Many thanks

Yes, you can use both the /app and /pages folders in your Next.js 13 app.

The /pages folder is the default folder for creating pages in a Next.js app. It is where you can create your top-level pages, such as your home page, about page, etc.

The /app folder, on the other hand, is a new folder introduced in Next.js 11 that allows you to create a custom App component, which is the top-level component that wraps around all other components in your app. You can use this folder to customize your app's layout and behaviour, such as adding global CSS or JavaScript, setting up custom routing, etc.

So, if you need to customize your app's behaviour or layout, you can use the /app folder to create a custom App component. If you need to create pages, you can use the /pages folder as usual. It's important to note that you can create subfolders within both /app and /pages to organize your components and pages.