PricingLoginStart free
Next.js 15 Fullstack (App Router + Server Actions) · Урок

Обзор страниц и макетов

Изучите различия между страницами и макетами, а также то, как они объединяются в структуру интерфейса приложения Next.js

Урок 3 из 412 шагов

«Обзор страниц и макетов» — бесплатный урок Next.js 15 Fullstack (App Router + Server Actions) на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Next.js 15 Fullstack (App Router + Server Actions), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Next.js 15 Fullstack (App Router + Server Actions) содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Welcome to Pages & Layouts

Next.js UI rests on two ideas: Pages and Layouts. This lesson shows what each one is and how they combine to build your interface.

What is a Page?

A Page is a React component that renders the UI for one route. Default-export it from a page.js file and that route gets its own view.

Creating a Simple Page

Here's a basic page.js that renders the home route /. A page is just a default-exported component — nothing more.

// app/page.js

export default function HomePage() {
  return (
    <h1>Welcome to My App!</h1>
  );
}

What is a Layout?

A Layout is UI shared across pages — a wrapper that gives consistent structure. Export it from layout.js; it takes a children prop for nested content.

The Root Layout

Every App Router app needs a root layout at app/layout.js. It wraps the whole app, including the html and body tags — the place for global styles and metadata.

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Nested Layouts

Add a layout.js inside any folder for a nested layout. An app/dashboard/layout.js wraps every page under dashboard — unique shared UI per section.

How They Combine

Next.js nests layouts automatically: a page renders inside its parent layout's children, that inside its parent's, all the way up to the root.

Example: A Blog Section

Picture a blog: blog/layout.js gives a shared nav, blog/page.js is the index, and blog/first-post/page.js a post — each nesting upward into the root.

Code: Blog Layout Example

This blog/layout.js wraps every /blog page with a header, nav, and footer — shared chrome that stays consistent across the section.

// app/blog/layout.js

export default function BlogLayout({ children }) {
  return (
    <div>
      <header><h1>My Awesome Blog</h1></header>
      <nav>
        <a href="/blog">Home</a> | <a href="/blog/archive">Archive</a>
      </nav>
      <main>{children}</main>
      <footer><p>&copy; 2023 CoddyKit Blog</p></footer>
    </div>
  );
}

Code: Blog Page Example

And here's blog/page.js. Its content renders right where {children} sits inside BlogLayout — page slotting into layout.

// app/blog/page.js

export default function BlogHomePage() {
  return (
    <section>
      <h2>Welcome to the Blog Homepage!</h2>
      <p>Discover our latest articles and insights.</p>
    </section>
  );
}

Pages vs. Layouts Quiz

Let's check your understanding of Next.js pages and layouts.

Ответь в интерактивном уроке

Recap: Pages & Layouts

Recap: Pages (page.js) render a route's unique UI, Layouts (layout.js) share UI across routes, and Next.js nests them via children.

Можно начать бесплатно

Изучай TypeScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
22
Уроки
88
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Обзор страниц и макетов» бесплатный?

Да — полный текст урока «Обзор страниц и макетов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 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 структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Обзор страниц и макетов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Next.js 15 Fullstack (App Router + Server Actions)?

Да. Каждый урок Next.js 15 Fullstack (App Router + Server Actions) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка проекта и CLI
  2. Основы маршрутизации по файловой системе
  3. Обзор страниц и макетов
  4. Стилизация приложения Next.js
← Назад к Next.js 15 Fullstack (App Router + Server Actions)