#using pages and app router at the same time

1 messages · Page 1 of 1 (latest)

spare glacier
#

What are some best practices regarding using pages and app router at the same time? Is this okay?

timber sundialBOT
#

Hi @spare glacier. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, it is perfectly okay to use both pages/ and app/ routers at the same time in your Next.js application. In fact, it is supported and encouraged by the Next.js team. The app directory is intentionally designed to work simultaneously with the pages directory to allow for incremental page-by-page migration. This means you can incrementally adopt the App Router as you're ready, on a per-route basis [^1^].

However, there are a few things to keep in mind:

  1. 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 [^5^].

  2. Although you can use both routers in the same project, it is recommended to use only one router in your new project to avoid confusion [^6^].

  3. When moving to the App Router, it may be the first time using React features that Next.js builds on top of such as Server Components, Suspense, and more. It's recommended to reduce the combined complexity of these updates by breaking down your migration into smaller steps [^4^].

  4. The app directory supports nested routes and layouts. You can use nested folders to define routes and a special page.js file to make a route segment publicly accessible. Special file conventions are used to create UI for each route segment. The most common special files are page.js and layout.js [^4^].

  5. You can colocate other files inside the app directory such as components, styles, tests, and more [^4^].