Сгенерированные роуты Laravel Inertia в TypeScript

Да, использование сгенерированных роутов Laravel в TypeScript-файлах в проектах Inertia Laravel с React и TypeScript полностью допустимо и даже рекомендуется для большинства случаев. Такие инструменты, как Ziggy или Laravel Wayfinder, генерируют типизированные импорты роутов, как в вашем примере с itemsDrafts(), обеспечивая синхронизацию с сервером и автодополнение в IDE. Этот подход популярен в Laravel Inertia React, минимизирует хардкод URL и ускоряет разработку, хотя требует внимания к размеру бандла и безопасности.

Содержание

• Сгенерированные роуты в Inertia Laravel
• Ziggy: стандарт для Laravel роутов в JS
• Wayfinder: типизированные роуты Laravel TypeScript
• Преимущества и недостатки подхода
• Примеры использования в React Inertia
• Безопасность и распространённость
• Источники
• Заключение

Сгенерированные роуты в Inertia Laravel

Представьте: вы пишете роут в Laravel 12 — Route::get('my/items/drafts', ...)->name('itemsDrafts'). А в React-компоненте с Inertia сразу импортируете itemsDrafts() и лепите в <Link>. Звучит как мечта? Это реальность с генераторами роутов для Inertia Laravel.

Inertia.js (147 запросов в Яндексе) связывает Laravel с фронтендом вроде React или Vue, но без генерации роутов приходится хардкодить пути или городить хелперы. А так — один источник правды на сервере. Подход эволюционировал: от простого Ziggy к полноценному Laravel Wayfinder (28 запросов), который генерирует не только роуты, но и контроллерные действия с типами.

Почему это работает в Laravel TypeScript? Генерация создаёт .ts-файлы с интерфейсами для параметров, query и даже модель-биндинга. Изменения на сервере? Перегенерируйте — и TS подхватит. В Laravel Inertia Vue (34 запроса) или React то же самое, только с разными хуками.

Но сразу вопрос: а если роутов сотни? Не раздует ли бандл? Об этом позже.

Ziggy: стандарт для Laravel роутов в JS

Ziggy — ветеран, официально рекомендуется в документации Inertia. Установка: composer require tightenco/ziggy и npm i ziggy-js. Добавьте @routes в Blade-шаблон, и роуты экспортируются в JS глобал.

В Inertia React:

import route from 'ziggy-js';
import { Link } from '@inertiajs/react';

<Link href={route('itemsDrafts')}>Черновики</Link>

С параметрами: route('posts.edit', { id: post.id }). TypeScript? php artisan ziggy:generate создаст ziggy.d.ts с типами.

Распространённость? В стартер-китах Laravel + Inertia Ziggy по умолчанию. Минус: глобал Ziggy добавляет ~10 КБ в бандл. Плюс — фильтры в config/ziggy.php: 'only' => ['items.*'], чтобы не светить админ-роуты.

В Laravel 12 Inertia (7 запросов) это базовый инструмент. Без него — копипаст URL, привет, баги при рефакторинге.

Wayfinder: типизированные роуты Laravel TypeScript

Laravel Wayfinder — свежак от Laravel (beta, но официальный репозиторий). Генерирует импортируемые функции для роутов и контроллеров: composer require laravel/wayfinder, npm i -D @laravel/vite-plugin-wayfinder, затем php artisan wayfinder:generate.

Ваш пример идеально ложится:

import { itemsDrafts } from '@/wayfinder/routes';
<Link href={itemsDrafts().url}>Drafts</Link>

Или для контроллера: import { edit } from '@/wayfinder/actions/App/Http/Controllers/PostController'; <Link href={edit.url(post.id)}>Редактировать</Link>.

Почему круче Ziggy? Полная типизация параметров, query-хелперы (itemsDrafts({ status: 'draft' })), интеграция с Inertia useForm. В Inertia React (71 запрос) — хук useRoute не нужен, всё локально.

Минусы: beta, возможны поломки API; генерит файлы по контроллерам — импортируйте выборочно, чтоб не раздувать. Но для Laravel TypeScript (15 запросов) — топ.

Сравнение в таблице:

Выбор? Ziggy для простоты, Wayfinder для TS-пуризма.

Преимущества и недостатки подхода

За — очевидно. Типобезопасность: IDE ругается на неверный параметр в itemsDrafts({ wrong: 'prop' }). DRY: роуты в одном месте, Laravel роуты (71 запрос) синхронизированы. В Inertia.js меньше ошибок SSR, хуки типа usePage().props.ziggy.

Ещё: модель-биндинг (route('posts.show', post) — auto ID), query-параметры без строк. Разработка быстрее — автодополнение роутов как в PHP.

Против. Бандл: Ziggy шлёт все роуты (фильтруйте!). Wayfinder — по контроллерам, но если их 50… Регенерация при чейнджах: добавьте в build-script. Безопасность: не экспозьте sensitive роуты, используйте 'except' => ['admin.*'].

В Reddit-обсуждениях жалуются на размер (170 КБ при сотнях роутов), но с фильтрами — ок. Избегать? Только если микросервис без имён роутов или чистый REST без Inertia.

А вы пробовали без генерации? URL в env или константах — ад при миграциях.

Примеры использования в React Inertia

Laravel выставить картинку Inertia React (29 запроса)? Легко с роутами. Предположим роут Route::get('images/{id}', ...)->name('images.show').

В компоненте:

import { Link } from '@inertiajs/react';
import { imagesShow } from '@/wayfinder/routes'; // или route('images.show') в Ziggy

function ImageList({ images }: { images: Image[] }) {
 return (
 <ul>
 {images.map(img => (
 <li key={img.id}>
 <Link href={imagesShow({ id: img.id }).url}>
 {img.name}
 </Link>
 </li>
 ))}
 </ul>
 );
}

Типы подхватятся: id — number.

С формой: const { data, setData, post } = useForm(); post(itemsDrafts().url);.

Для Inertia React — стандарт. В Ziggy docs примеры с TS-хелперами. Хотите query? itemsDrafts({ page: 2, filter: 'draft' }).url.

Ещё трюк: в SSR инициализируйте Ziggy с page.props.ziggy и window.location.

Безопасность и распространённость

Распространён? Абсолютно. В Kinsta-гайде Ziggy — норма для Inertia Laravel (205 запросов). Wayfinder набирает, особенно в новых проектах Laravel 12.

Безопасность: фильтруйте в ziggy.php: 'only' => ['public.*', 'items.*']. По ролям? Передавайте ziggy в props динамически.

Риски минимальны: роуты — публичная инфа, уязвимости в логике, не в именах. В продакшене — комбо с middleware.

Избегать стоит, если проект крошечный (3 роута) или без TS. Иначе — must-have.

Источники

1. GitHub - tighten/ziggy: Use your Laravel routes in JavaScript
2. GitHub - laravel/wayfinder
3. How To Use Inertia.js in Your Laravel Projects
4. Secure Your Laravel Named Routes with Ziggy + Inertia
5. How to instruct ZIGGY don’t expose my sensitive route

Заключение

Сгенерированные роуты в TypeScript — золотой стандарт для Inertia Laravel с React, будь то Ziggy или Wayfinder. Они упрощают жизнь, добавляют типы и экономят часы на дебаге URL. Да, следите за бандлом и фильтрами, но плюсы перевешивают. Начните с Ziggy — стабильность на лицо, а Wayfinder подхватите для полного TS. В Laravel 12 это ускорит деплой и сделает код чище. Попробуйте на тестовом проекте — не пожалеете.