Careeroza

The app Directory

Folders Are Routes

In the App Router, folders define URL segments and a special file page.tsx makes that segment visible as a page.

app/page.tsx                    ->  /
app/products/page.tsx           ->  /products
app/products/mobiles/page.tsx   ->  /products/mobiles
app/cart/page.tsx               ->  /cart
app/components/Button.tsx       ->  (not a route: no page.tsx)

File Path to URL

Example

A small function that does what Next.js does at build time: turn each page.tsx path into a URL.

const files = [
  'app/page.tsx',
  'app/products/page.tsx',
  'app/products/mobiles/page.tsx',
  'app/cart/page.tsx',
  'app/components/Button.tsx',
  'app/about/layout.tsx',
];

function toRoute(file: string): string | null {
  if (!file.endsWith('/page.tsx')) return null; // only page.tsx creates a route
  const dir = file.slice('app'.length, -'/page.tsx'.length);
  return dir === '' ? '/' : dir;
}

for (const f of files) {
  const route = toRoute(f);
  console.log(f.padEnd(32) + (route ?? '(no route)'));
}

Output

app/page.tsx                    /
app/products/page.tsx           /products
app/products/mobiles/page.tsx   /products/mobiles
app/cart/page.tsx               /cart
app/components/Button.tsx       (no route)
app/about/layout.tsx            (no route)

Server Components by Default

Note: Every component in app/ is a React Server Component unless the file starts with 'use client'. It runs on the server, can be async, and sends no JavaScript to the browser. You will learn more in the last module of this level.