Routes, Layouts and Navigation

MODULE 08 · LESSON 8.1

Model URLs with nested layouts, dynamic segments and accessible navigation.

Practice-firstBeginner-friendlyProduction-aware

Where this fits in CourseFlow

The difficult part of Routes, Layouts and Navigation is deciding where the responsibility belongs and how you will know it works. This decision shapes the frontend boundary: what is rendered, what becomes interactive, and which state is allowed to cross into another component or route.

Here, that decision supports a specific checkpoint: Move CourseFlow to a route-based full-stack shell. A reviewable result should include a focused component test, an accessibility check and a before/after browser trace rather than a claim that the feature simply works.

Routes, Layouts and Navigation workflowA four-step visual showing app directory, layouts, dynamic routes, loading and error UI.Routes, Layouts and Navigation workflow1App Directory2Layouts3Dynamic Routes4Loading And ErrorUI

Routes, Layouts and Navigation workflow

  1. 1App Directory
  2. 2Layouts
  3. 3Dynamic Routes
  4. 4Loading And Error UI
Routes, Layouts and Navigation workflow: a practical sequence used in this lesson.

A practical model for routes, layouts and navigation

Model URLs with nested layouts, dynamic segments and accessible navigation. The useful unit of understanding is the boundary: who owns the decision, which input crosses it, what result is visible and how a failure is reported.

  • App Directory: Name its input, observable result and most likely failure in this lesson.
  • Layouts: Locate this responsibility in CourseFlow and defend the boundary you chose.
  • Dynamic Routes: Implement one behavior that another learner can reproduce without reading your mind.
  • Loading And Error UI: Compare the simplest correct approach with one credible alternative.

Read the result, not just the syntax

Use the sample to answer one question: does the implementation make app directory easier to verify or merely harder to see?

TSX
export default function CoursePage({ params }: { params: Promise<{ slug: string }> }) {
  return <main>...</main>;
}
Test the claim, not your memory

Change one input connected to app directory, predict the result, then run the successful path and one failure path.

Build the smallest useful version

  1. 1
    App Directory

    Break one assumption on purpose, make recovery clear and record the trade-off you accepted.

  2. 2
    Layouts

    Name the caller and the owner of this behavior before changing the implementation.

  3. 3
    Dynamic Routes

    Compare expected and actual output before editing; the difference tells you where to investigate.

  4. 4
    Loading And Error UI

    Keep names tied to the product rule so a reviewer can follow the change without decoding abbreviations.

Failure patterns to recognize

  • Treating app directory as vocabulary instead of defining the behavior it must produce.
  • Testing the expected path while ignoring an empty, invalid, repeated or unauthorized case around layouts.
  • Allowing dynamic routes to cross a boundary without an explicit contract or useful error.
  • Changing several layers before capturing the first piece of evidence, which makes the original cause harder to see.

A debugging route that preserves evidence

  1. Reduce the problem to the smallest failing Routes, Layouts and Navigation case.
  2. Capture the actual input and output at the app directory boundary.
  3. Read the first relevant error, request, trace or query rather than the loudest downstream symptom.
  4. Test one explanation for the failure in layouts; avoid changing two variables together.
  5. Keep a regression check that would expose the same defect if it returned.

Security decision

Assume data from props, storage, URLs and APIs can be malformed. Do not expose secrets in client bundles, and do not treat hidden UI as authorization.

Performance decision

Measure shipped JavaScript, rendering work and network waterfalls. Move work off the client only when the measured trade-off supports it.

PRACTICE

Build something you can inspect

Create catalog, course and lesson routes with loading, not-found and error states.

Stretch challenge

Replace one happy-path assumption about layouts with explicit validation and show the before-and-after behavior.

Definition of done

  • The behavior around app directory works with realistic input.
  • A failure involving layouts is handled clearly and without leaking sensitive detail.
  • The implementation remains keyboard-usable when it produces an interface.
  • Your evidence directly supports the claim made in the exercise.
  • The README records the important trade-off without pretending the solution is universal.

Check your reasoning

What user interface belongs in a shared layout rather than a page?

Answer by naming the expected app directory behavior, the layer responsible for it and the evidence that would confirm your explanation.

Where would you investigate the first failure?

Start where layouts crosses a boundary. Compare the actual input and output there before following downstream symptoms.

What would make this work reviewable?

Show the focused change, repeatable steps, the result of your check and one honest trade-off connected to dynamic routes.

What to carry into the next lesson

  • Model URLs with nested layouts, dynamic segments and accessible navigation.
  • Keep app directory visible at the boundary where it can be tested.
  • Use evidence from layouts before widening the implementation.

References and related reading

Progress is stored only in this browser.

Share this page

Share this page with the people who will use it next.

X Facebook LinkedIn WhatsApp Email

Discussion

No comments yet. Add the first useful question or observation.