Узнайте, как делиться макетами с каталогом приложений Next.js 13.
Привет, мои коллеги, разработчики Next.js, пока я работал над своим побочным проектом, я заметил кое-что о новом каталоге приложений Next.js 13. Я подумал, что, поскольку маршруты могут совместно использовать макеты, что, если бы я мог совместно использовать макет для определенных маршрутов, не затрагивая URL-адрес? Я был уверен, что это невозможно, пока не посетил документацию и не нашел интересный раздел о группах маршрутов.
По сути, это позволяет вам определить несколько маршрутов, заключая имя папки в круглые скобки: (folderName), и в результате, когда вы определяете layout.js/tsx для этой папки, все подпапки/маршруты наследуют и совместно используют макет.
Подробнее здесь — Группы маршрутов | Next.js.
Это особенно полезно, если у вас есть несколько сегментов вашего сайта с похожими макетами. Вместо того, чтобы везде повторять макеты 🤦♂️, вы можете вместо этого использовать группу маршрутов.
Чтобы продемонстрировать это, я создал демо-приложение, вы можете найти репозиторий GitHub здесь: Github — Route Group.
Внутри папки приложения я добавил две группы маршрутов:
- адаптация
- аутентифицированный
Каждый со своими маршрутами:
Внутри папок группы маршрутов находится файл layout.tsx, содержащий макет, который будет общим для всех маршрутов в папке, что означает компоненты, помещенные в файл layout.tsx. файлы не перерисовываются при навигации по страницам.
Из приведенного выше фрагмента кода компонент не будет повторно отображаться при навигации и будет сохранять свое состояние при навигации.
Чтобы еще больше доказать это, я добавил компонент в (аутентифицированный) макет.
Это всего лишь компонент, который анимируется вверх и вниз, и, поскольку он находится в файле layout.tsx, он не отображается повторно при навигации по страницам.
Чтобы просмотреть это полностью. Вот развернутый URL-адрес сайта: нажмите здесь
Удачного кодирования. 🚀🚀
Создавайте составные приложения с повторно используемыми компонентами, как Lego.
Bit – это цепочка инструментов с открытым исходным кодом для разработки компонуемого программного обеспечения.
С помощью Bit вы можете разрабатывать любую часть программного обеспечения — современное веб-приложение, компонент пользовательского интерфейса, серверную службу или сценарий CLI — как независимую, повторно используемую и компонуемую единицу программного обеспечения. Совместно используйте любой компонент в своих приложениях, чтобы упростить совместную работу и ускорить сборку.
Присоединяйтесь к более чем 100 000 разработчиков, которые вместе создают компонуемое программное обеспечение.
Начните с этих руководств:
