breeze next

Laravel Breeze -next.jsエディション▲

導入

このリポジトリは、next.jsのLaravel Breezeアプリケーション /認証スターターキットフロントエンドの実装です。すべての認証ボイラープレートはすでにあなたのために書かれています - Laravel Sanctumを搭載しているため、美しいnext.jsフロントエンドと強力なLaravelバックエンドのペアをすぐに開始できます。

公式文書

インストール

まず、Laravel Breezeを新鮮なLaravelアプリケーションに設置し、BreezeのAPI足場をインストールして、次の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を使用して、CORが「同種」の問題を避けることをお勧めします。

認証フック

このnext.jsアプリケーションには、ページから離れたすべての認証ロジックを抽象化するように設計されたカスタムuseAuth Reactフックが含まれています。さらに、フックを使用して、現在認証されているユーザーにアクセスできます。

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

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

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

export default ExamplePage

注：ユーザーオブジェクトのプロパティにアクセスするときに、Optional Chaining（ user?.name of user.name ）を使用する必要があります。

名前付きルート

便利なため、Ziggyを使用して、ReactアプリケーションからLaravelアプリケーションの名前付きルートURLを参照することができます。

貢献

次にブリーズに貢献することを検討していただきありがとうございます！貢献ガイドは、Laravelドキュメントにあります。

行動規範

Laravelコミュニティがすべての人を歓迎していることを確認するために、行動規範をレビューし、遵守してください。

セキュリティの脆弱性

セキュリティの脆弱性を報告する方法についてのセキュリティポリシーを確認してください。

ライセンス

Laravel Breeze Nextは、MITライセンスに基づいてライセンスされているオープンソースのソフトウェアです。