breeze next

Laravel Breeze - Edisi Next.js ▲

Perkenalan

Repositori ini adalah implementasi dari frontend starter Application / Authentication Starter Kit di Next.js. Semua boilerplate otentikasi sudah ditulis untuk Anda - ditenagai oleh Laravel Sanctum, memungkinkan Anda untuk dengan cepat mulai memasangkan frontend Anda yang indah. JS dengan backend Laravel yang kuat.

Dokumentasi resmi

Instalasi

Pertama, buat backend Laravel yang kompatibel dengan memasang Laravel Breeze ke dalam aplikasi Laravel segar dan memasang perancah 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

Selanjutnya, pastikan variabel lingkungan APP_URL dan FRONTEND_URL Anda diatur ke http://localhost:8000 dan http://localhost:3000 , masing -masing.

Setelah mendefinisikan variabel lingkungan yang sesuai, Anda dapat melayani aplikasi Laravel menggunakan perintah serve Artisan:

 # Serve the application...
php artisan serve

Selanjutnya, klon repositori ini dan instal ketergantungannya dengan yarn install atau npm install . Kemudian, salin file .env.example ke .env.local dan berikan URL backend Anda:

 NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Akhirnya, jalankan aplikasi melalui npm run dev . Aplikasi akan tersedia di http://localhost:3000 :

 npm run dev

Catatan: Saat ini, kami sarankan menggunakan localhost selama pengembangan lokal dari backend dan frontend Anda untuk menghindari masalah "asal-asal" CORS.

Kait otentikasi

Aplikasi Next.js ini berisi hook react useAuth khusus, yang dirancang untuk mengabstraksikan semua logika otentikasi dari halaman Anda. Selain itu, kait dapat digunakan untuk mengakses pengguna yang saat ini diautentikasi:

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

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

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

export default ExamplePage

Catatan: Anda perlu menggunakan chaining opsional ( user?.name bukan user.name ) Saat mengakses properti pada objek pengguna untuk memperhitungkan render sisi server awal selanjutnya.

Rute bernama

Untuk kenyamanan, Ziggy dapat digunakan untuk merujuk URL rute bernama aplikasi Laravel Anda dari aplikasi React Anda.

Berkontribusi

Terima kasih telah mempertimbangkan berkontribusi untuk Breeze Next! Panduan kontribusi dapat ditemukan dalam dokumentasi Laravel.

Kode Etik

Untuk memastikan bahwa komunitas Laravel menyambut semua, silakan tinjau dan patuhi oleh kode etik.

Kerentanan keamanan

Harap tinjau kebijakan keamanan kami tentang cara melaporkan kerentanan keamanan.

Lisensi

Laravel Breeze Next adalah perangkat lunak bersumber terbuka yang dilisensikan di bawah lisensi MIT.