Next.js’s New App Vs. Pages Router: A Detailed Comparison

<p>We placed our pages in Next&#39;s &quot;pages&quot; 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&#39;s pages changes &mdash; 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&#39;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&#39;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&#39;s directory. All of them hold a particular functionality. For example, there are loading.js, template.js, and layout.js &mdash; we will discuss the latter in a second.</li> </ul> <p>So far, so good; we&#39;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>