Routing (App/Pages Router)

Q: How does file based routing work in the Next.js App Router?

In the App Router, every folder inside the app directory represents a segment of the URL path, and adding a file named page.js inside that folder makes it a visitable route, so the folder structure of your project directly mirrors the URL structure of your website.

Q: How is routing in the Pages Router different from the App Router?

In the Pages Router, each file directly inside the pages folder becomes a route based on its file name, such as pages/about.js becoming the about page, while the App Router instead uses folders with a page.js file inside each one, giving more flexibility for organizing related files like layouts and loading states alongside each route.

Q: How do you programmatically navigate to a different page in response to a user action, such as after a successful form submission?

In the App Router, you import the useRouter hook from next/navigation inside a client component, and call its push method with the desired path, which navigates the user to that new page without a full page reload, keeping the experience fast and smooth.

Q: How do you use the Link component to enable fast client side navigation between pages?

You import the Link component from next/link and use it in place of a regular anchor tag for internal navigation, which automatically preloads the linked page's code in the background and navigates without a full page reload, making transitions between pages feel instant.

Q: How would you organize routes for a large application using route groups to keep related sections logically separated without affecting the URL?

You wrap folder names in parentheses, such as (marketing) or (dashboard), to create route groups that let you apply different layouts or organize files for related sections of your application, while parentheses in folder names are completely ignored when building the actual visible URL path.

5 questions found

How does file based routing work in the Next.js App Router?

Beginner

In the App Router, every folder inside the app directory represents a segment of the URL path, and adding a file named page.js inside that folder makes it a visitable route, so the folder structure of your project directly mirrors the URL structure of your website.

// app/about/page.js is accessible at /about
// app/contact/page.js is accessible at /contact
export default function AboutPage() {
  return <h1>About Us</h1>;
}

Real-world example A company website organizes its about, contact, and pricing pages simply by creating matching folders with page.js files inside the app directory, with no separate routing configuration needed.

Common follow-ups: What file name is required to make a folder into a visitable page?;Can a folder exist without a page.js file inside the App Router?

Dynamic Routes & Catch-All Segments;Layouts & Templates

How is routing in the Pages Router different from the App Router?

Beginner

In the Pages Router, each file directly inside the pages folder becomes a route based on its file name, such as pages/about.js becoming the about page, while the App Router instead uses folders with a page.js file inside each one, giving more flexibility for organizing related files like layouts and loading states alongside each route.

// Pages Router
// pages/about.js is accessible at /about

// App Router
// app/about/page.js is accessible at /about

Real-world example A developer familiar with the older Pages Router notices that the App Router requires an extra folder level for each route, but appreciates being able to colocate loading and error files right next to each page.

Common follow-ups: Which router should be used for new Next.js projects starting today?;Can a single project use both routers at the same time during migration?

Next.js Project Setup & Configuration;Layouts & Templates

How do you programmatically navigate to a different page in response to a user action, such as after a successful form submission?

Intermediate

In the App Router, you import the useRouter hook from next/navigation inside a client component, and call its push method with the desired path, which navigates the user to that new page without a full page reload, keeping the experience fast and smooth.

'use client';
import { useRouter } from 'next/navigation';

export default function LoginForm() {
  const router = useRouter();
  async function handleSubmit() {
    await login();
    router.push('/dashboard');
  }
  return <button onClick={handleSubmit}>Log In</button>;
}

Real-world example A login form redirects a user to their dashboard automatically after a successful sign in, using the router's push method to navigate without a jarring full page reload.

Common follow-ups: What is the difference between router.push and router.replace?;Does programmatic navigation work the same way in server components?

Client Components & Hydration;Authentication & Authorization in Next.js

How do you use the Link component to enable fast client side navigation between pages?

Intermediate

You import the Link component from next/link and use it in place of a regular anchor tag for internal navigation, which automatically preloads the linked page's code in the background and navigates without a full page reload, making transitions between pages feel instant.

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

Real-world example A website's main navigation bar uses the Link component for every internal page, giving visitors an instant, app like feel as they move between pages without full page reloads.

Common follow-ups: Why should Link be used instead of a regular anchor tag for internal links?;Does Link automatically preload every linked page immediately?

Performance & Lazy Loading;Bundle Analysis & Code Splitting

How would you organize routes for a large application using route groups to keep related sections logically separated without affecting the URL?

Advanced

You wrap folder names in parentheses, such as (marketing) or (dashboard), to create route groups that let you apply different layouts or organize files for related sections of your application, while parentheses in folder names are completely ignored when building the actual visible URL path.

// app/(marketing)/about/page.js is accessible at /about
// app/(dashboard)/settings/page.js is accessible at /settings
// Each group can have its own layout.js

Real-world example A large SaaS application organizes its public marketing pages and its authenticated dashboard pages into separate route groups, each with its own distinct layout, while keeping the actual URLs clean and simple.

Common follow-ups: Can you have multiple root layouts using different route groups?;Do route groups affect how code splitting works across the application?

Layouts & Templates;Next.js Project Setup & Configuration