ดาวน์โหลด breeze next - breeze next Source Download

breeze next

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

Laravel Breeze - Next.js Edition ▲

การแนะนำ

พื้นที่เก็บข้อมูลนี้เป็นการใช้งานของชุดเริ่มต้นแอปพลิเคชัน Laravel Breeze / Authentication แผ่นหม้อไอน้ำการรับรองความถูกต้องทั้งหมดถูกเขียนขึ้นสำหรับคุณ - ขับเคลื่อนโดย Laravel Sanctum ช่วยให้คุณเริ่มจับคู่ที่สวยงามของคุณได้อย่างรวดเร็วต่อไป

เอกสารอย่างเป็นทางการ

การติดตั้ง

ขั้นแรกให้สร้างแบ็กเอนด์ Laravel ที่เข้ากันได้กับ JS Next.js โดยการติดตั้ง Laravel Breeze ลงในแอปพลิเคชัน Laravel สดและติดตั้ง API Scaffolding ของ 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 "Origin เดียวกัน"

เบ็ดการรับรองความถูกต้อง

แอปพลิเคชัน Next.js นี้มี hook react useAuth ที่กำหนดเองออกแบบมาเพื่อเป็นนามธรรมตรรกะการตรวจสอบทั้งหมดออกจากหน้าเว็บของคุณ นอกจากนี้ตะขอสามารถใช้ในการเข้าถึงผู้ใช้ที่ได้รับการรับรองความถูกต้องในปัจจุบัน:

 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 ) เมื่อเข้าถึงคุณสมบัติบนวัตถุผู้ใช้เพื่อบัญชีสำหรับการเรนเดอร์เซิร์ฟเวอร์เริ่มต้นของ next.js