Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyThe App Router in Next.js is used to create routes for server-side rendered pages, while the Pages Router is used to create routes for client-side rendered pages. The App Router is used to create routes for API endpoints, while the Pages Router is used to create routes for pages. The App Router is used to create routes for dynamic pages, while the Pages Router is used to create routes for static pages.
The App Router is used to create routes for pages that require data fetching, while the Pages Router is used to create routes for pages that do not require data fetching. The App Router is used to create routes for pages that require authentication, while the Pages Router is used to create routes for pages that do not require authentication.
For example, the following code snippet shows how to use the App Router to create a route for a dynamic page:
[code]
// app.js
const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get('/dynamic-page', (req, res) => {
return app.render(req, res, '/dynamic-page
@AhmadassayyaafJul 29.2023 — #However, based on the context of Next.js routing, here's a general explanation of what they might refer to:
Pages Router: In Next.js, the "Pages Router" generally refers to the built-in routing system that automatically maps pages based on the files present in the "pages" directory. Each file inside the "pages" directory represents a specific route, and the Next.js framework handles the routing for you. For example, if you have a file named about.js inside the "pages" directory, Next.js will automatically create a route for /about using that file.
App Router: The term "App Router" might refer to a custom router or routing logic implemented by developers within their Next.js application. This custom router can handle routing differently than the default Pages Router and might be used to implement more complex navigation, handle authentication, or integrate with external libraries or frameworks.Keep in mind that these explanations are speculative based on the common terminology related to routing in web applications. To get a precise understanding of "App Router" and "Pages Router" in the context of Next.js, I recommend checking the official Next.js documentation or any recent resources or discussions related to these terms.
What is the difference between App Router and Pages Router in Next.js?
I read through all of this here: https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration but what is the difference? What’s the tl;dr on why I should invest time in the new app router vs the existing pages router concepts in nextjs?
Sign in
to post a answer2 Replies ↴
Davinci•003 auto-replyThe App Router in Next.js is used to create routes for server-side rendered pages, while the Pages Router is used to create routes for client-side rendered pages. The App Router is used to create routes for API endpoints, while the Pages Router is used to create routes for pages. The App Router is used to create routes for dynamic pages, while the Pages Router is used to create routes for static pages. The App Router is used to create routes for pages that require data fetching, while the Pages Router is used to create routes for pages that do not require data fetching. The App Router is used to create routes for pages that require authentication, while the Pages Router is used to create routes for pages that do not require authentication.
For example, the following code snippet shows how to use the App Router to create a route for a dynamic page:
[code]
// app.js
const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get('/dynamic-page', (req, res) => {
return app.render(req, res, '/dynamic-page
1
@AhmadassayyaafJul 29.2023 — #However, based on the context of Next.js routing, here's a general explanation of what they might refer to:Pages Router: In Next.js, the "Pages Router" generally refers to the built-in routing system that automatically maps pages based on the files present in the "pages" directory. Each file inside the "pages" directory represents a specific route, and the Next.js framework handles the routing for you. For example, if you have a file named about.js inside the "pages" directory, Next.js will automatically create a route for /about using that file.
App Router: The term "App Router" might refer to a custom router or routing logic implemented by developers within their Next.js application. This custom router can handle routing differently than the default Pages Router and might be used to implement more complex navigation, handle authentication, or integrate with external libraries or frameworks.Keep in mind that these explanations are speculative based on the common terminology related to routing in web applications. To get a precise understanding of "App Router" and "Pages Router" in the context of Next.js, I recommend checking the official Next.js documentation or any recent resources or discussions related to these terms.