File conventions

Last reviewed May 28, 2026 Content v20260528

Track mode

client_nextjs

Means

In-browser Next.js (client components)

Reading

~1 min

Level

beginner

This lesson

This lesson teaches File conventions: the concepts, APIs, and habits you need before advancing in Next.js.

Without File conventions, you will struggle to read or extend Next.js codebases and playground exercises.

You will apply File conventions in contexts like: Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.

Write TSX for Client Components, click Run—React 18 CDN + in-browser TSX compile; use client/server lessons explain App Router concepts; mountApp renders interactive UI; printOutput feeds the terminal.

When you can explain the previous lesson's ideas without copying starter code.

App Router routes are defined by special file names inside the app/ directory. The folder path becomes the URL; the file name declares the role of that module.

Core files

page.tsx — unique UI for a route segment (required to make a URL public)
layout.tsx — shared UI wrapping child segments; can nest
loading.tsx — instant fallback UI while segment data loads
error.tsx — error boundary for that segment (must be Client Component)
not-found.tsx — UI when notFound() is called
route.ts — Route Handler (HTTP API for that segment)
template.tsx — like layout but remounts on navigation (rare)

Example tree

app/
  layout.tsx
  page.tsx
  dashboard/
    layout.tsx
    page.tsx
    settings/
      page.tsx
      loading.tsx

URLs: /, /dashboard, /dashboard/settings. The dashboard layout wraps both dashboard pages.

Private folders

Prefix a folder with _ (e.g. _components) to colocate helpers without creating a route. Route groups use parentheses: (auth) organizes files without changing the URL.

Self-check

Which file is required for /contact to exist?
What is the difference between layout.tsx and template.tsx?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Which file creates a route?
Colocation benefit?

No discussion yet. Be the first to ask a question.