Основы маршрутизации по файловой системе
Разберитесь в основных принципах маршрутизации на основе файловой системы в Next.js и научитесь создавать простые страницы и маршруты
«Основы маршрутизации по файловой системе» — бесплатный урок Next.js 15 Fullstack (App Router + Server Actions) на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Next.js 15 Fullstack (App Router + Server Actions), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Next.js 15 Fullstack (App Router + Server Actions) содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Intro to File-System Routing
Next.js routes by your file system — your folder and file layout directly defines your URLs. Files become pages, folders become URL segments.
The Core `app` Directory
Every route lives inside the special app directory — the root of your site's structure. Anything you put there shapes the routing.
Creating a Root Page
A route needs a page.js that default-exports a React component. Place it directly in app/ and it becomes your homepage at /.
Hello Next.js Homepage!
Here's a minimal app/page.js. This component renders at your root URL / — the homepage visitors land on first.
export default function HomePage() {
return (
<div>
<h1>Welcome to CoddyKit!</h1>
<p>This is your Next.js homepage.</p>
</div>
);
}Folders for Nested Paths
Want a /dashboard route? Make a dashboard folder in app/ and drop a page.js inside. The folder name becomes the URL segment.
The Dashboard Page
This code goes in app/dashboard/page.js. Visit /dashboard and Next.js renders exactly this component.
export default function DashboardPage() {
return (
<div>
<h1>Your Dashboard</h1>
<p>Here you'll find all your important stats.</p>
</div>
);
}Deeper Nested Routes
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.
Shared UI with `layout.js`
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.
Route Mapping Quiz
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?
File-System Routing Recap
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.
Часто задаваемые вопросы
Урок «Основы маршрутизации по файловой системе» бесплатный?
Да — полный текст урока «Основы маршрутизации по файловой системе» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Next.js 15 Fullstack (App Router + Server Actions), подпишись на CoddyKit PRO. Курс Next.js 15 Fullstack (App Router + Server Actions) содержит 4 уроков всего.
Чему я научусь в уроке «Основы маршрутизации по файловой системе»?
Разберитесь в основных принципах маршрутизации на основе файловой системы в Next.js и научитесь создавать простые страницы и маршруты Ты практикуешь Next.js 15 Fullstack (App Router + Server Actions) с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Next.js 15 Fullstack (App Router + Server Actions)?
Предыдущий опыт не требуется. Next.js 15 Fullstack (App Router + Server Actions) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Основы маршрутизации по файловой системе»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Next.js 15 Fullstack (App Router + Server Actions)?
Да. Каждый урок Next.js 15 Fullstack (App Router + Server Actions) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка проекта и CLI
- Основы маршрутизации по файловой системе
- Обзор страниц и макетов
- Стилизация приложения Next.js