Catch-All Routes в Next.js позволяют динамически сопоставлять URL с гибкими параметрами пути, расширяя возможности системы маршрутизации вашего приложения.

Основные особенности

• Динамические параметры: Доступ к сегментам пути с использованием символа ... (rest параметр).
• Порядок сопоставления: Порядок определения определяет приоритет маршрутов.
• Поведение при отсутствии совпадения: Возможность настроить поведение при отсутствии совпадения.

Конфигурация

Файл маршрутизации Next.js (pages/foo/[...bar].js):

• Корневой Catch-All: Загружается для любого несопоставленного пути или маршрута /foo без дальнейших подпутей.

export default function CatchAll() {
   // Логика для Корневого Catch-All
}

• Вложенный Catch-All: Активируется при доступе к корневому пути вместе с подкаталогами.

   export default function NestedCatchAll() {
   // Логика для Вложенного Catch-All
   }

• Fallback Страницы: Идеально подходят для обработки ошибок или ожидания динамических данных.

   export async function getServerSideProps() {
   // Логика получения данных
	   return { props: { data } };
   }
 
 
   export default function Fallback({ data }) {
	 return <div>{data}</div>;
   }

Режимы Fallback

Укажите поведение при отсутствии совпадения в методе getStaticPaths

• True: Генерирует пути во время сборки и обрабатывает отсутствующие маршруты как fallback (только SSG).
• False: Точно определяет пути страниц во время сборки (без fallback).
• ‘blocking’: Обрабатывает fallback через сервер во время выполнения (SSR или SSG).

Назад