breeze next Download - breeze next Source Code Download

breeze next

Code Source AI

1.0.0

Télécharger

Laravel Breeze - Suivant.js Edition ▲

Introduction

Ce référentiel est une implémentation du Kit de démarrage d'application / authentification de Laravel Breeze Frontend dans Next.js. Toute la chauffe-plaque d'authentification est déjà écrite pour vous - alimentée par Laravel Sanctum, vous permettant de commencer rapidement à jumeler votre magnifique frontend.

Documentation officielle

Installation

Tout d'abord, créez un backend Laravel compatible Next.js en installant Laravel Breeze dans une application de Laravel fraîche et en installant l'échafaudage de l'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

Ensuite, assurez-vous que les variables d'environnement APP_URL et FRONTEND_URL de votre application sont définies sur http://localhost:8000 et http://localhost:3000 , respectivement.

Après avoir défini les variables d'environnement appropriées, vous pouvez servir l'application Laravel à l'aide de la commande serve Artisan:

 # Serve the application...
php artisan serve

Ensuite, clonez ce référentiel et installez ses dépendances avec yarn install ou npm install . Ensuite, copiez le fichier .env.example sur .env.local et fournissez l'URL de votre backend:

 NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Enfin, exécutez l'application via npm run dev . L'application sera disponible sur http://localhost:3000 :

 npm run dev

Remarque: Actuellement, nous vous recommandons d'utiliser localhost lors du développement local de votre backend et de votre frontend pour éviter les problèmes de "même originaux".

Crochet d'authentification

Cette application Next.js contient un crochet useAuth React personnalisé, conçu pour abstraction de toute la logique d'authentification loin de vos pages. De plus, le crochet peut être utilisé pour accéder à l'utilisateur actuellement authentifié:

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

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

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

export default ExamplePage

Remarque: vous devrez utiliser un chaînage facultatif ( user?.name au lieu de user.name ) Lorsque vous accédez aux propriétés de l'objet utilisateur pour rendre compte du rendu initial du serveur de next.js.

Itinéraires nommés

Pour plus de commodité, Ziggy peut être utilisé pour référencer les URL de route nommées de votre application Laravel à partir de votre application React.