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

Стоит ли переходить на App Router и использовать новейшие функции React?

Каталог страниц

Вы можете создавать страницы как компоненты React в каталоге страниц, и каждая страница связана с определенным маршрутом. Вы также можете создавать макеты для переноса страниц и иметь одинаковые элементы на нескольких страницах (например, панель навигации и нижний колонтитул). Это помогает в организации и структурировании вашего приложения.

Пример каталога страниц

// pages/index.tsx
import React from 'react';

const Home: React.FC = () => {
  return <h1>Hello, world!</h1>;
};

export default Home;

Каталог приложений

Новый каталог приложений представлен вместе с каталогом страниц для поддержки постепенного внедрения и предоставления новых функций, таких как рендеринг на стороне сервера и компоненты React Server.

Между прочим, постепенное внедрение — это, по сути, подход к внедрению изменений постепенно и поэтапно, а не сразу.

Пример каталога приложений

// app/pages/index.tsx
import React from 'react';
import Layout from '../components/Layout';

const Home: React.FC = () => {
  return (
    <Layout>
      <h1>Hello, world!</h1>
    </Layout>
  );
};

export default Home;

Каталог страниц

Плюсы:

  • Легко понять и использовать
  • Встроенная поддержка рендеринга на стороне сервера и серверных компонентов React.
  • Хорошо для небольших приложений
  • Простая и понятная маршрутизация
  • Подходит для статических страниц
  • Автоматическая маршрутизация на основе файловой структуры

Минусы:

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

Каталог приложений

Плюсы:

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

Минусы:

  • Более сложный
  • Экспериментальный и еще не считается стабильным для производственного использования.
  • Крутая кривая обучения
  • Некоторые функции, такие как вложенные макеты, кэширование, могут иметь ограничения и проблемы.
  • Требует дополнительной настройки и может не понадобиться для более простых приложений.

Как решить, какой каталог использовать?

Решение об использовании каталога Pages или App зависит от сложности вашего приложения.

Если у вас есть небольшое приложение со статическими страницами, хорошим выбором будет каталог Pages. Если у вас большое приложение с динамическими страницами, лучшим выбором будет каталог приложений.

Все еще не могу решить! Обратите внимание на следующее:

  • Используйте каталог Pages, если вам нужна простая и понятная маршрутизация, автоматическая маршрутизация на основе файловой структуры и простое создание страниц в виде компонентов React.
  • Используйте каталог App, если вам нужны более продвинутые возможности маршрутизации и макета, вы хотите использовать серверные компоненты React для повышения производительности и хотите настроить поведение или макет вашего приложения.
  • Рассмотрите возможность использования обоих каталогов, если вы хотите постепенно внедрять каталог App, продолжая использовать каталог Pages для более простых страниц.
  • Имейте в виду, что каталог приложений является экспериментальным и еще не считается стабильным для использования в рабочей среде, и может потребоваться дополнительное изучение и понимание новой парадигмы.

В конечном счете, решение о том, какой каталог использовать, зависит от конкретных потребностей и целей вашего проекта.

Копать глубже: прочтите мою другую статью, чтобы ответить на вопрос:

Стоит ли переходить на новый Next.js 13 App Router?

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

Не стесняйтесь проверить мое портфолио, угостить меня кофе или написать мне по электронной почте [email protected].

Если эта статья была вам полезна (или вы просто щедры), несколько раз нажмите кнопку аплодисментов 👏 ниже. Ваша поддержка значит для нас целый мир! ⬇⬇