Next.js произвел революцию в разработке React благодаря своим мощным функциям и интуитивно понятному дизайну. С выпуском Next.js 13 новый App Router занял центральное место, предлагая разработчикам более гибкий и мощный способ структурирования своих приложений. В этом подробном руководстве мы углубимся в App Router, изучим его функции и лучшие практики. Чтобы проиллюстрировать эти концепции, мы будем использовать реальный пример: проект генератора сопроводительных писем.

Понимание маршрутизатора приложений

Маршрутизатор приложений в Next.js 13 представляет собой сдвиг парадигмы в том, как мы подходим к маршрутизации в приложениях React. В отличие от предыдущего Pages Router, App Router использует подход, основанный на файловой системе, который более точно соответствует тому, как мы мысленно моделируем структуру нашего приложения.

Ключевые преимущества App Router:

1. Интуитивная маршрутизация на основе файлов: маршруты определяются файловой структурой в каталоге вашего приложения.
2. Улучшенная производительность: встроенная поддержка серверных компонентов React.
3. Повышенная гибкость: упрощенная реализация макетов, вложенная маршрутизация и многое другое.
4. Встроенные оптимизации: автоматическое разделение кода и предварительная выборка.

Начало работы с App Router

Давайте начнем с настройки нового проекта Next.js 13 с помощью App Router. Откройте терминал и запустите:

npx create-next-app@latest my-app
cd my-app

При появлении запроса обязательно выберите «Да» для параметра «Хотите ли вы использовать App Router?».

Базовая маршрутизация с помощью App Router

В App Router каждая папка представляет собой сегмент маршрута. Давайте создадим простую структуру для нашего генератора сопроводительных писем:

app/
├── page.tsx
├── layout.tsx
├── cover-letter/
│   └── page.tsx
└── templates/
    └── page.tsx

Здесь page.tsx в корневой папке приложения представляет домашнюю страницу. Папки сопроводительного письма и шаблонов создают маршруты для соответствующих страниц.

В приложении/page.tsx:

export default function Home() {
  return 
Welcome to the Cover Letter Generator
;
}

В приложении/сопроводительное письмо/page.tsx:

export default function CoverLetter() {
  return 
Create Your Cover Letter
;
}

С помощью этой структуры вы можете перейти к / для домашней страницы и к /cover-letter для страницы создания сопроводительного письма.

Макеты и вложенные маршруты

Одной из мощных функций App Router является возможность создания вложенных макетов. Давайте добавим общий макет для нашего приложения.

В приложении/layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

Этот макет будет применен ко всем страницам нашего приложения, обеспечивая единообразную структуру навигации.

Динамические маршруты

Динамические маршруты имеют решающее значение для приложений, генерирующих контент на основе параметров. Давайте реализуем динамический маршрут для просмотра конкретных шаблонов сопроводительных писем.

Создайте новый файл: app/templates/[id]/page.tsx:

export default function Template({ params }: { params: { id: string } }) {
  return 
Template {params.id}
;
}

Теперь при переходе к /templates/1 или /templates/formal этот компонент будет отображаться с соответствующим идентификатором.

Серверные компоненты и получение данных

В Next.js 13 представлены серверные компоненты React, позволяющие нам получать данные на сервере. Давайте реализуем это в нашем генераторе сопроводительных писем.

В приложении/сопроводительное письмо/page.tsx:

async function getTemplates() {
  // Simulate API call
  return [
    { id: 1, name: 'Professional' },
    { id: 2, name: 'Creative' },
    { id: 3, name: 'Academic' },
  ];
}

export default async function CoverLetter() {
  const templates = await getTemplates();

  return (
    

      
Create Your Cover Letter
      

        {templates.map(template => (
          
{template.name}
        ))}
      
    
  );
}

Этот компонент извлекает данные с сервера, улучшая производительность и SEO.

Ссылки и навигация

Для навигации на стороне клиента используйте компонент Link из Next.js. Обновите свое приложение/layout.tsx:

import Link from 'next/link';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

Реальное применение: генератор сопроводительных писем

Теперь, когда мы рассмотрели основы, давайте посмотрим, как эти концепции применяются в реальном проекте. Проект Resumate-NextJS на GitHub — отличный пример генератора сопроводительных писем, созданного с помощью Next.js.

Основные выводы из этого проекта:

1. Структурированная маршрутизация: в проекте используется четкая структура маршрутизации, разделяющая задачи между различными страницами и компонентами.

2. Рендеринг на стороне сервера: использует возможности Next.js SSR для повышения производительности и SEO.

3. Маршруты API: реализует маршруты API для логики на стороне сервера, демонстрируя, как обрабатывать отправку форм и обработку данных.

4. Стилизация: использует Tailwind CSS для создания адаптивного и чистого дизайна пользовательского интерфейса.

5. Управление состоянием: реализует контекстный API для управления состоянием приложения между компонентами.

Расширенные концепции

По мере того, как вы освоитесь с App Router, изучите эти дополнительные концепции:

1. Параллельные маршруты: отображение нескольких страниц в одном макете.
2. Перехватывающие маршруты: настройте поведение маршрутизации для конкретных сценариев.
3. Обработчики маршрутов: создание конечных точек API в структуре App Router.
4. Промежуточное ПО: добавьте в свои маршруты собственную серверную логику.

Лучшие практики и советы

1. Используйте серверные компоненты: используйте их для выборки данных и тяжелых вычислений.
2. Оптимизация изображений: используйте компонент изображения Next.js для автоматической оптимизации.
3. Внедрите прогрессивное улучшение: убедитесь, что ваше приложение работает без JavaScript для большей доступности.
4. Используйте TypeScript: для улучшения качества кода и удобства разработки.
5. Регулярные обновления: обновляйте версию Next.js, чтобы пользоваться новейшими функциями и оптимизациями.

Заключение

Маршрутизатор приложений Next.js 13 представляет собой значительный шаг вперед в разработке приложений React. Предоставляя интуитивно понятную систему маршрутизации на основе файловой системы и используя возможности серверных компонентов React, она позволяет разработчикам создавать производительные, масштабируемые и удобные в обслуживании веб-приложения.

Как показано на примере генератора сопроводительных писем, App Router упрощает процесс создания сложных динамических веб-приложений. Независимо от того, создаете ли вы простой сайт-портфолио или сложное веб-приложение, освоение App Router значительно улучшит ваш опыт разработки Next.js.

Помните, лучший способ учиться — это делать. Клонируйте репозиторий Resumate-NextJS, поэкспериментируйте с кодом и попробуйте реализовать свои собственные функции с помощью App Router. Приятного кодирования!