All 5 Next.js Project Setup & Configuration questions
More in Next.js Project Setup & Configuration
How do you create a new Next.js project from scratch? What is the purpose of the next.config.js file in a Next.js project? How do you configure custom path aliases in a Next.js project so you can write cleaner import statements? How would you set up a Next.js project to support absolute imports, custom webpack configuration, and multiple environments cleanly?
Advertisement
Back to results for “Project Structure”
Next.js › Next.js Project Setup & Configuration

How is the folder structure organized differently between the App Router and the Pages Router?

Intermediate

Answer

The App Router uses an app folder where each folder represents a route segment and special files like page.js, layout.js, and loading.js define behavior, while the Pages Router uses a pages folder where each file directly corresponds to a route, with special files like _app.js and _document.js controlling global behavior.
// App Router structure
// app/blog/[slug]/page.js

// Pages Router structure
// pages/blog/[slug].js
Real-world example A team migrating an older project carefully maps their existing pages folder structure to the new app folder conventions, understanding how routes and special files correspond between the two systems.

Common follow-ups: Can the App Router and Pages Router coexist in the same project?;Which router is recommended for new Next.js projects today?

Routing (App/Pages Router);Layouts & Templates
All 5 Next.js Project Setup & Configuration questions