Next.js: App Router vs Pages Router

Let's talk about setting up a Next.js project, focusing on choosing between the App Router and the Pages Router. As I've been delving into React, I initially got to know the 'create-react-app' command, which made the setup process and understanding the basic file structure extremely easy. However, upon discovering that 'create-react-app' is no longer recommended, I was led to Next.js.

Transitioning to Next.js has proven to be a steeper learning curve, highlighting the complexity of its setup compared to 'create-react-app'. Here's a lit of the questions you are asked when running 'create-next-app'.

npx create-next-app@latest mysite
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
? Would you like to use App Router? (recommended) › No / Yes

When you're new to Next.js, deciding between using the Pages Router and the App Router can be confusing, and understanding how each affects your project's file structure isn't immediately clear.

Pages Router

Initially encountering Next.js, the Pages Router seems like a straightforward choice. It operates on a simple principle: the pages directory. You create a file within this directory, and just like that, you've created a new webpage (or route) for your site. This process is very beginner-friendly, relying on conventions that directly link the file structure to your website's URL paths. For example, if you want to add a /contact page to your site, you would simply create a contact.js file in the pages directory. However, as a beginner, it might not be immediately obvious how this choice between routers affects the organization and scalability of your project in the long run.

Here is the pages router structure (no src directory)

Pages/
├── _app.js
├── _document.js
└── index.js
Styles/
├── global.css
├── Home.module.css

App Router

The App Router, introduced in later versions of Next.js, provides a more explicit approach to routing. Unlike the Pages Router, where routes are implicitly created based on file names in the pages directory, the App Router requires you to define your routes using a JavaScript API within an app directory. This method grants more control and flexibility, particularly for projects with complex routing needs or dynamic content. For beginners, the App Router introduces a level of complexity and requires a deeper understanding of Next.js concepts right from the start. It's a hands-on approach that might not be clear at first, especially when trying to grasp how it differs from the simplicity of the Pages Router and how it influences the structure and development of your application.

Here is the app router structure (no src directory)

app/
├── favicon.ico
├── global.css
├── layout.js
├── page.js
└── page.module.css

Key Differences for Beginners

Simplicity vs. Control: Pages Router wins if you're after simplicity. It's great for static sites or apps with straightforward routing needs. App Router, however, gives you more control and is better suited for complex routing scenarios.

Convention vs. Configuration: With Pages Router, you follow a convention (file names and structures). App Router is more about configuration, where you define routes through code.

Dynamic Routing: Both routers support dynamic routes, but App Router provides a more explicit approach, which might be easier to manage and understand for complex cases.

Learning Curve: Pages Router is generally easier for beginners to grasp. App Router introduces concepts that might be more familiar to those with experience in other JavaScript frameworks or more complex routing needs.

Which One Should You Choose?

If you're just starting out, dipping your toes with the Pages Router might be the way to go. It's less to manage upfront, and you can get a site up and running quickly. As you grow more comfortable with Next.js or if your project's routing needs become more sophisticated, considering the App Router could be a game-changer, offering you the flexibility and power to manage more complex routing patterns.

For more details be sure to check out the official documentation. Next.js Project Structure