Skip to content
Deadline to Die

Module 2: Routing & Layouts

🗺️ Module 2: Routing & Layouts

In this module, we move from manual URL parsing and manual React Router trees to Next.js File-Based Routing.

🏗️ 1. The Mechanic: Manual Tree Routing

In a traditional SPA, you define your routes as a nested tree of components in your entry file.

🧩 The Problem: The “Route Waterfall”

When you use a component-based router (like React Router), the browser must download the entire route config before it knows what to render. This often leads to “loading spinners” nested inside other “loading spinners.”

The Manual Pattern:

<BrowserRouter>
  <Routes>
    <Route element={<Layout />}>
      <Route path="profile" element={<Profile />} />
    </Route>
  </Routes>
</BrowserRouter>

🏗️ 2. The Abstraction: File-Based Routing

Next.js uses the Folders on your disk to determine the URL. It also separates the “Shell” (Layout) from the “Content” (Page).

The Next.js File Structure:

app/
  layout.tsx    <-- Shared UI (Root)
  page.tsx      <-- /
  dashboard/
    layout.tsx  <-- Sidebar/Header for dashboard only
    page.tsx    <-- /dashboard

The Code:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <nav>My App</nav>
        <main>{children}</main>
      </body>
    </html>
  );
}

🧪 Professor’s Challenge: Parallel Routes

Task: Research “Parallel Routes” in the Next.js docs.

  1. Try to build a Dashboard where the Sidebar and the Main Content load at different speeds using @sidebar and @content folders.
  2. Note how you can’t easily do this with a traditional linear router!