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