breeze next

Laravel Breeze - Next.js Edition ▲

Introducción

Este repositorio es una implementación del kit de inicio de la aplicación / autenticación de Laravel Breeze frontend en Next.js. Toda la plantilla de autenticación ya está escrita para usted, impulsada por Laravel Sanctum, lo que le permite comenzar rápidamente a combinar su hermosa próxima.js frontend con un poderoso backend de Laravel.

Documentación oficial

Instalación

Primero, cree un backend de Laravel compatible con Next.js instalando Laravel Breeze en una aplicación fresca de Laravel e instalando andamios API de 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

A continuación, asegúrese de que las variables de entorno APP_URL y FRONTEND_URL de su aplicación estén configuradas en http://localhost:8000 y http://localhost:3000 , respectivamente.

Después de definir las variables de entorno apropiadas, puede servir a la aplicación Laravel utilizando el comando serve Artisan:

 # Serve the application...
php artisan serve

A continuación, clone este repositorio e instale sus dependencias con yarn install o npm install . Luego, copie el archivo .env.example a .env.local y suministre la URL de su backend:

 NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Finalmente, ejecute la aplicación a través de npm run dev . La aplicación estará disponible en http://localhost:3000 :

 npm run dev

Nota: Actualmente, recomendamos usar localhost durante el desarrollo local de su backend y frontend para evitar problemas de "mismo origen" de Cors.

Gancho de autenticación

Esta aplicación Next.js contiene un gancho React React useAuth , diseñado para abstraer toda la lógica de autenticación lejos de sus páginas. Además, el gancho se puede usar para acceder al usuario actualmente autenticado:

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

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

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

export default ExamplePage

Nota: Deberá usar encadenamiento user.name ( user?.name

Rutas nombradas

Por conveniencia, Ziggy se puede usar para hacer referencia a las URL de ruta nombradas de su aplicación Laravel desde su aplicación React.

Que contribuye

¡Gracias por considerar contribuir a Breeze a continuación! La guía de contribución se puede encontrar en la documentación de Laravel.

Código de conducta

Para garantizar que la comunidad de Laravel sea acogedora para todos, revise y cumpla con el Código de Conducta.

Vulnerabilidades de seguridad

Revise nuestra política de seguridad sobre cómo informar vulnerabilidades de seguridad.

Licencia

Laravel Breeze Next es un software de código abierto con licencia bajo la licencia MIT.