breeze next

Laravel Breeze -Next.js 에디션 ▲

소개

이 저장소는 Next.js에서 Laravel Breeze Application / Authentication Starter Kit Frontend의 구현입니다. 모든 인증 보일러 플레이트는 이미 Laravel Sanctum으로 구동되는 당신을 위해 작성되었으며, 아름다운 다음에 아름다운 Laravel 백엔드와 신속하게 짝을 이루기 시작할 수 있습니다.

공식 문서

설치

먼저, Laravel Breeze를 새로운 Laravel 애플리케이션에 설치하고 Breeze의 API 스캐 폴딩을 설치하여 다음.js 호환 Laravel 백엔드를 만듭니다.

 # 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 으로 설정되어 있는지 확인하십시오.

적절한 환경 변수를 정의한 후 serve Artisan 사령부를 사용하여 Laravel 애플리케이션을 제공 할 수 있습니다.

 # 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 사용하여 "동일한 오리핀"문제를 피하십시오.

인증 후크

이 Next.js 응용 프로그램에는 모든 인증 로직을 페이지에서 멀리 떨어 뜨리도록 설계된 useAuth React Hook가 포함되어 있습니다. 또한 후크는 현재 인증 된 사용자에게 액세스하는 데 사용될 수 있습니다.

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

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

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

export default ExamplePage

참고 : 사용자 객체의 속성 user.name 액세스 할 때 다음.js의 초기 서버 측 렌더링을 설명 할 때 선택적 체인 ( user?.name .

노선이라는 이름이 지정되었습니다

편의를 위해 Ziggy를 사용하여 Laravel 애플리케이션의 REACT 응용 프로그램에서 이름이 지정된 Route URL을 참조 할 수 있습니다.

기여

다음에 Breeze에 기여하는 것을 고려해 주셔서 감사합니다! 기여 가이드는 Laravel 문서에서 찾을 수 있습니다.

행동 강령

Laravel 커뮤니티가 모두를 환영하도록하기 위해 행동 강령을 검토하고 준수하십시오.

보안 취약점

보안 취약점을보고하는 방법에 대한 보안 정책을 검토하십시오.

특허

Laravel Breeze Next는 MIT 라이센스에 따라 라이센스가 부여 된 오픈 소프트웨어입니다.