← Back to Webstore Course

Week 4: Next.js App Structure and Routing

This week connects frontend feature delivery with backend behavior inside the same Next.js application using page routes, API routes, and middleware.

Learning Objectives

  • Build one page-level feature tied to API behavior.
  • Define clean request and response contracts.
  • Understand middleware behavior in protected routes.
  • Trace full request lifecycle and debug failures.

Detailed Topics

1. Route Ownership

Clarify when logic should remain in page components vs move into API handlers or shared utility modules.

2. Middleware as Guardrails

Middleware should enforce route-level rules such as access control, lock state, or environment-based behavior before page logic runs.

3. API Contract Discipline

Teach explicit success and error payloads. Client components should depend on stable response shapes and status handling.

Pair Session Plan (90 Minutes)

  1. Pick one page-level user flow to improve.
  2. Update one related API route with stronger validation.
  3. Test middleware impact on authenticated vs guest flows.
  4. Verify end-to-end behavior manually.

Independent Ticket

Ship one page and API slice with a short test plan and expected failure behavior notes.

Mentor Checkpoint

  • Student can explain why middleware is needed in this flow.
  • Student handles validation failures with user-safe messaging.
  • Student can debug one intentional broken request path.

Helpful Resources

← Previous: Week 3 Next: Week 5 →