breeze next Download - breeze next Quellcode Download

breeze next

AI-Quellcode

1.0.0

Herunterladen

Laravel Breeze - Next.js Edition ▲

Einführung

Dieses Repository ist eine Implementierung der Laravel Breeze -Anwendung / Authentifizierungsstarter -Starter -Kit -Frontend in Next.js. Die gesamte Authentifizierungs -Boilerplate ist bereits für Sie geschrieben - angetrieben von Laravel Sanctum, sodass Sie schnell anfangen können, Ihren schönen nächsten Frontend mit einem leistungsstarken Laravel -Backend zu kombinieren.

Offizielle Dokumentation

Installation

Erstellen Sie zunächst einen nächsten.

 # 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

Stellen Sie als Nächstes sicher, dass die Umgebungsvariablen Ihrer Anwendung APP_URL und FRONTEND_URL auf http://localhost:8000 bzw. http://localhost:3000 eingestellt sind.

Nachdem Sie die entsprechenden Umgebungsvariablen definiert haben, können Sie der Laravel -Anwendung mit dem Befehl serve dienen:

 # Serve the application...
php artisan serve

Klonen Sie als nächstes dieses Repository und installieren Sie seine Abhängigkeiten mit der Installation yarn install oder npm install . Kopieren Sie dann die Datei .env.example in .env.local und liefern Sie die URL Ihres Backends:

 NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Führen Sie schließlich die Anwendung über npm run dev aus. Die Anwendung ist unter http://localhost:3000 verfügbar:

 npm run dev

HINWEIS: Derzeit empfehlen wir die Verwendung von localhost während der lokalen Entwicklung Ihres Backends und Frontends, um CORs "gleichorientierte" Probleme zu vermeiden.

Authentifizierungshaken

useAuth dieser nächsten. Darüber hinaus kann der Haken verwendet werden, um auf den aktuell authentifizierten Benutzer zuzugreifen:

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

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

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

export default ExamplePage

Hinweis: Sie müssen optionale Ketten ( user?.name anstelle von user.name ) verwenden, wenn Sie auf Eigenschaften auf das Benutzerobjekt zugreifen, um den ersten serverseitigen Render von Next.JS zu berücksichtigen.