React View Transitions: пошаговый гайд по анимациям в Next.js

Автор: Илья Чумаченков • ⏱ 2 мин чтения •

Введение

Плавные переходы между страницами делают сайт живым и удобным, как в мобильных приложениях. С View Transitions в Next.js ты добавишь анимации навигации, сдвиги и загрузки за 10 минут — без лишних библиотек. Идеально для новичков.

Что понадобится

  • Node.js 18+ (проверь node -v).
  • Браузер Chrome 111+ (поддержка View Transitions).
  • Аккаунт на Vercel или GitHub для деплоя (опционально).
  • Базовые знания React (но я всё объясню).

Пошаговая инструкция

  1. Создай новый Next.js проект
    Запусти npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --import-alias="@/*".
    Почему? App Router в Next.js 15+ нативно поддерживает View Transitions, Tailwind упростит стили, TypeScript поймает ошибки. Перейди в папку: cd my-app.

  2. Включи экспериментальную фичу в конфиге
    Открой next.config.js (или mjs) и добавь:
    js /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { viewTransitions: true, }, }; module.exports = nextConfig;
    Почему? Это активирует автоматические переходы для <Link>. Без этого анимации не запустятся. Перезапусти dev-сервер: npm run dev.

  3. Настрой базовую навигацию с анимацией страниц
    В src/app/page.tsx замени контент на:
    tsx export default function Home() { return ( <div className="p-8"> <h1 className="text-4xl font-bold">Домашняя страница</h1> <Link href="/about" className="text-blue-500 underline">Перейти на About</Link> </div> ); }
    Создай src/app/about/page.tsx:
    tsx import Link from 'next/link'; export default function About() { return ( <div className="p-8"> <h1 className="text-4xl font-bold">О нас</h1> <Link href="/" className="text-blue-500 underline">Назад</Link> </div> ); }
    Почему? <Link> автоматически использует View Transitions. Протестируй: кликни — страницы сдвинутся плавно. Предупреждение: В Safari/FF пока не работает без полифилла.

  4. Добавь анимацию конкретных элементов
    Назначь уникальные имена: в page.tsx добавь style={{ viewTransitionName: 'title' }} к <h1>. Аналогично в about/page.tsx.
    Кастомизируй CSS в src/app/globals.css:
    css @view-transition { navigation: auto; } ::view-transition-old(root) { animation: slide-out 0.3s; } ::view-transition-new(root) { animation: slide-in 0.3s; } @keyframes slide-out { to { transform: translateX(-100%); } } @keyframes slide-in { from { transform: translateX(100%); } }
    Почему? viewTransitionName матчит элементы между страницами, а CSS псевдоэлементы управляют анимацией. Теперь заголовки "летят" при переходе.

  5. Обработай back/forward и загрузку
    В src/app/layout.tsx оберни <html>:
    ```tsx
    {children}

`` Для динамики используйdocument.startViewTransition(() => router.push('/about'))в кнопке (импортuseRouter). *Почему?* Браузер сам анимирует историю (back/forward).suppressHydrationWarningубирает предупреждения SSR. *Предупреждение:* На слабых девайсах может лагать — добавьprefers-reduced-motion`.

Результат

Твой сайт получит плавные сдвиги страниц при кликах, анимированные элементы (типа заголовков) и переходы назад/вперёд. Всё работает из коробки в Chrome — как в современных SPA, но без SPA-сложностей.

Советы

  • Лайфхак: Для сложных анимаций экспериментируй в Chrome DevTools (эмулятор устройств). Деплой на Vercel: npm i -g vercel; vercel.
  • Частые ошибки: Забыл experimental.viewTransitions — анимаций нет. Конфликт стилей — проверь view-transition-name уникально. Нет поддержки? Добавь полифилл: npm i @oddbird/viewtransitions.
  • Про: Комбинируй с Claude для 10x продуктивности — генерируй код анимаций ИИ.
  • Тестируй на мобильных: анимации ускоряют восприятие на 20%.
#React #NextJS #Анимации #Туториал #ВебРазработка