أساسيات التوجيه المعتمد على نظام الملفات

Next.js routes by your file system — your folder and file layout directly defines your URLs. Files become pages, folders become URL segments.

Every route lives inside the special app directory — the root of your site's structure. Anything you put there shapes the routing.

A route needs a page.js that default-exports a React component. Place it directly in app/ and it becomes your homepage at /.

Here's a minimal app/page.js. This component renders at your root URL / — the homepage visitors land on first.

Want a /dashboard route? Make a dashboard folder in app/ and drop a page.js inside. The folder name becomes the URL segment.

This code goes in app/dashboard/page.js. Visit /dashboard and Next.js renders exactly this component.

Nest as deep as you like — each folder adds a URL segment. So app/products/electronics/page.js maps to /products/electronics. Clean and logical.

A layout.js defines shared UI that wraps the pages in its folder — perfect for nav bars, footers, and sidebars that stay put across routes.

Imagine you have a file located at app/blog/posts/page.js within your Next.js project. What URL path would this file correspond to?

Recap: the app directory roots all routes, page.js defines a route's UI, folders create nested segments, and layout.js shares UI across them.