breeze next

Laravel Breeze - Next.js Edition ▲

Введение

Этот репозиторий является реализацией фронта набора для приложения Laravel Breeze / Authentication Starter Kit в next.js. Весь шаблон аутентификации уже написан для вас - питается Laravel Sanctum, что позволяет быстро начать сочетать ваш красивый фронт.

Официальная документация

Установка

Во -первых, создайте Backend Laravel, совместимый с Laravel, установив Laravel Breeze в свежее применение Laravel и установив леса API Breeze:

 # Create the Laravel application...
laravel new next-backend

cd next-backend

# Install Breeze and dependencies...
composer require laravel/breeze --dev

php artisan breeze:install api

# Run database migrations...
php artisan migrate

Далее, убедитесь, что переменные среды вашего приложения APP_URL и FRONTEND_URL устанавливаются на http://localhost:8000 и http://localhost:3000 соответственно.

После определения соответствующих переменных среды вы можете обслуживать приложение Laravel, используя команду serve Artisan:

 # Serve the application...
php artisan serve

Затем клонируйте этот репозиторий и установите его зависимости с помощью yarn install или npm install . Затем скопируйте файл .env.example на .env.local и предоставьте URL вашего бэкэнда:

 NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Наконец, запустите приложение через npm run dev . Приложение будет доступно по адресу http://localhost:3000 :

 npm run dev

Примечание. В настоящее время мы рекомендуем использовать localhost во время локальной разработки вашего бэкэнда и фронта, чтобы избежать проблем CORS «однооригин».

Аутентификация крюк

Это приложение Next.js содержит пользовательский крюк useAuth React, предназначенный для абстрагирования всей логики аутентификации от ваших страниц. Кроме того, крюк может быть использован для доступа к ныне аутентифицированному пользователю:

 const ExamplePage = ( ) => {
    const { logout , user } = useAuth ( { middleware : 'auth' } )

    return (
        < >
            < p > { user ?. name } </ p >

            < button onClick = { logout } > Sign out </ button >
        </ >
    )
}

export default ExamplePage

Примечание. Вам нужно будет использовать user.name цепочки ( user?.name

Названные маршруты

Для удобства, Ziggy может использоваться для ссылки на названные URL -адреса маршрута вашего приложения Laravel из вашего приложения React.

Внося

Спасибо, что рассмотрели вопрос о том, чтобы внести свой вклад в Breeze Next! Руководство по взносу можно найти в документации Laravel.

Нормы поведения

Чтобы гарантировать, что сообщество Laravel приветствует всех, пожалуйста, просмотрите и соблюдайте кодекс поведения.

Уязвимости безопасности

Пожалуйста, просмотрите нашу политику безопасности о том, как сообщать о уязвимости безопасности.

Лицензия

Laravel Ext Next-это программное обеспечение с открытым исходным кодом, лицензированное по лицензии MIT.