Topic

Understand project structure

Definition

A Next.js App Router project organizes route segments and framework files by directory, alongside reusable UI, assets, and configuration.

In simpler words

Folders show where a URL lives; reusable code belongs outside a route when more than one place needs it.

A predictable tree lets you trace an Course screen from its URL to its route component and supporting code.

After this you can

Locate App Router routes
Separate route files from reusable UI
Explain why route groups do not change URLs

Trace a route through the web app

Under apps/web/src/app, folders model route segments. A page.tsx file makes a segment renderable; layout.tsx, loading.tsx, error.tsx, and route.ts have special framework meanings.

Feature and shared component folders are for code that should not be coupled to one URL. Static browser-served files belong in public rather than being imported as route code.

A useful route map

src/app/course/[track]/page.tsx   // /course/frontend|backend
src/app/page.tsx                   // /
src/app/(dev)/examples/            // live labs (route group)
src/components/course/             // roadmap + topic UI

The (app) group organizes files but does not appear in the URL.

Mistake: putting reusable UI in every page

// Wrong — copied into tickets/page.tsx and course/page.tsx
function EmptyState() { /* ... */ }

// Right — share deliberately
import { EmptyState } from '@/components/EmptyState';

Copying route UI makes visual and accessibility fixes drift.

Use route groups as organization

Definition

A route group is a parenthesized folder that organizes related routes without becoming a URL segment.

In simpler words

Groups are labels for developers, not path text for the browser.

Use groups for distinct shells such as authenticated app pages and development examples.

Do not use a group merely to hide unclear ownership; name feature folders by the domain they support.

Live playground

Project structure playground

Map each file path to its browser URL or responsibility.

Inspect apps/web/src/app vs src/features vs public.

next-project-structure

Keep in mind

Start URL tracing in src/app.
Keep reusable UI out of route folders when multiple routes need it.
Use public only for assets that must be served by URL.