Next.js’s New App Vs. Pages Router: A Detailed Comparison
<p>We placed our pages in Next's "pages" directory for years.<br />
This is about to change now.</p>
<p>A while ago, Next.js introduced the new App Router, significantly changing how we create pages. But not only the directory in which we store our app's pages changes — but also the available feature.</p>
<p>Where our Next projects used to look like this:</p>
<pre>
└── pages
├── about.js
├── index.js
└── team.js</pre>
<p>Using the App Router, our app's structure looks similar to this:</p>
<pre>
src/
└── app
├── about
│ └── page.js
├── globals.css
├── layout.js
├── login
│ └── page.js
├── page.js
└── team
└── route.js</pre>
<p>The conventions for creating an app are as follows:</p>
<ul>
<li>Every page of our app has its own directory. The directory name defines the URL path.</li>
<li>The component that is rendered when accessing the path in the browser is page.js.</li>
<li>We can store other components in the path's directory. These will not affect routing if they are not named page.js.</li>
<li>A couple of files with reserved names can be placed in each page's directory. All of them hold a particular functionality. For example, there are loading.js, template.js, and layout.js — we will discuss the latter in a second.</li>
</ul>
<p>So far, so good; we've covered the conventions.</p>
<p>As you can tell, slight refactoring is necessary for existing apps. But what is the motivation for doing so? Here are the new features usable in the App Router.</p>
<p><a href="https://javascript.plainenglish.io/next-jss-new-app-vs-pages-router-a-detailed-comparison-46f846963af5">Click Here</a></p>