Layout, состояния и навигация

Что такое layout

Layout — интерфейс, общий для нескольких страниц: шапка, сайдбар, подвал. Вы пишете его один раз, а страницы рендерятся на месте children.

// app/blog/layout.tsx
export default function BlogLayout({ children }: LayoutProps<'/blog'>) {
  return (
    <div className="grid grid-cols-[200px_1fr]">
      <BlogSidebar />
      {children}            {/* здесь появляется текущая страница */}
    </div>
  )
}

Самое важное свойство: при навигации между дочерними страницами layout не перемонтируется — его состояние (поле ввода, прокрутка сайдбара) сохраняется. Меняется только children.

Layout вкладываются

/blog/privet = app/layout.tsx → app/blog/layout.tsx → app/blog/[slug]/page.tsx.

Layout и template — различия

Состояния интерфейса как файлы

Next автоматически превращает специальные файлы в нужные React-компоненты:

'use client'      // error.tsx должен быть Client Component

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Что-то пошло не так.</p>
      <button onClick={reset}>Попробовать снова</button>
    </div>
  )
}

Что такое клиентская навигация

С обычным <a href> браузер заново скачивает всю страницу. С <Link> Next получает только изменённое и обновляет страницу без перезагрузки — layout остаются, переход мгновенный.

import Link from 'next/link'
<Link href="/blog/privet">Читать</Link>

<Link> ещё и делает prefetch: когда ссылка появляется на экране, Next начинает загружать маршрут в фоне.

Способы навигации — и когда

useRouter берётся из next/navigation, а не из next/router (это Pages Router).

Активная ссылка в меню

'use client'
const pathname = usePathname()
const active = pathname === href || pathname.startsWith(href + '/')

<Link href={href} aria-current={active ? 'page' : undefined}>...</Link>

Коротко

• Layout = общий интерфейс, сохраняется при навигации; template = перемонтируется.
• loading, error, not-found = состояния интерфейса, объявленные файлами.
• <Link> для навигации без перезагрузки + prefetch; useRouter из next/navigation для навигации из кода.

Официальные источники

• Next.js — Linking and Navigating
• Next.js — Error Handling
• Next.js — loading.js
• Next.js — template.js