Next.js + Laravel Breezeを使ったアプリケーションのセットアップ

# はじめに
本記事をご覧いただきありがとうございます。東京でバックエンドをメインでやっているoonoです。今回はフロントにNext.js, バックエンドにLaravelを使用したアプリケーションのセットアップ方法を自身の備忘録を兼ねて記載していきます。

::: note warn
誤っている情報があればご教示いただけますと幸いです
:::
# 前提
本記事では以下の前提で作業を進めていきます
* npmがインストール済み
* composerがインストール済み
* ローカルでの起動のため、サーバー環境での動作は範囲外
* Next.js14系
* Laravel11
* mac（windows環境の方は本記事の方法ですとWSL2が必要になります）

# ゴール
本記事内容のゴールは**Next.js + Laravelで作成するアプリケーションにてログイン・ログアウト処理ができるようになること**です。想定するアプリケーションが提供する認証機能は以下のような感じです。
* ログイン、ログアウト（今回はここを扱います）
* ユーザー新規作成
* パスワード再設定
* メール認証

# フロントエンドのセットアップ
では早速アプリケーションの構築をしていきましょう！
通常であればnpxコマンドでプロジェクトを１から作成するところですが、今回はBreeze Nextという便利なリポジトリがあるので[こちら](https://github.com/laravel/breeze-next)をcloneしましょう。
 ### フロントエンド用のディレクトリを用意
 ご自身の好きなディレクトリにクローンします。私は「sample-app」というフォルダを作成し、その中に「fe」というフォルダ名でクローンします。
 ```
 mkdir sample-app && cd sample-app
 ```
 git cloneコマンドでリポジトリのURLの後にスペース続きで任意の作成するフォルダ名を指定できます（指定しない場合はリポジトリ名）
 ```
 git clone https://github.com/laravel/breeze-next.git fe
 ```
  ### 環境変数を指定
  Next.jsでローカル開発する際は「.env.local」というファイルに必要な変数を記載していきます。今回必要なのはバックエンドapiのパスです。feフォルダ直下に.env.localを作成し、バックエンドURLを記載します
  ```
  touch .env.local
  ```
  バックエンドURLを指定します。
  ```.env.local
  NEXT_PUBLIC_BACKEND_URL=http://localhost
  ```
### ローカル起動
フロントエンドの画面が表示されるか確認していきます。
まずはnpmコマンドにてモジュールをインストール
```
npm install
```
ローカルサーバー起動
```
npm run dev
```
以下の画面が表示されていれば正常に動作しています。Laravelで開発されている方にはお馴染みの画面ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/16b3a300-58c8-08d0-ad0f-6d9c8cf31ad8.png)
ログイン画面もすでに用意されていますが、バックエンドが無いのでまだ動きません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/34975230-e7f9-2b52-b7fb-3425628dced7.png)

# バックエンド構築
では続いてLaravelでバックエンドを構築していきましょう。Laravelでは認証系の処理をうまいことやってくれるパッケージがいくつかありますが、今回は[Breeze](https://readouble.com/laravel/11.x/ja/starter-kits.html)を使います。Breezeではreact or vueでのscaffoldが用意されているほか、apiを想定したscaffoldも用意されており、アプリケーションの要件に応じて使い分けれるのも嬉しいです。

::: note info
breezeでreactかvueを使用する際、inertia.jsという仕組みを使ってlaravelと画面のやり取りをうまいこと制御するため、爆速開発できます！！ので、こっちもおすすめです！
:::


アプリのディレクトリに移動してLaravelアプリケーションをインストールします。今回はsailでコンテナ環境を立ち上げていきます。
```
cd sample-app
```
DBコンテナ、メールコンテナのみを使用します。フォルダ名は「be」とします
```
curl -s "https://laravel.build/be?with=mysql,mailpit" | bash
```
ビルドに時間がかかるので、気長に待ちましょう。最後にPCのパスワードを求められるのでそれを入力すればインストール完了です！beフォルダでバックエンドサーバーを起動しましょう。
```
cd be && ./vendor/bin/sail up -d
```

### Breezeのセットアップ
続いて、Breezeをインストールします。
```
./vendor/bin/sail composer require laravel/breeze --dev
```
開発に使用するフォルダ群をインストール
```
./vendor/bin/sail artisan breeze:install
```
以下のようにどのモードを使用するか訊かれるのでAPI onlyを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/f3657a85-c54a-4ed0-fdcb-6c94737ea10a.png)
テストコードの作成はしませんが、テストモジュールはPHPUnitにしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/05661776-99d4-97b7-bd3d-030c79eb19c4.png)
最後に作成されたマイグレーションファイルを実行するか訊かれるのでyesを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/bbd2bfbd-a66c-e906-caad-eb633315caab.png)
マイグレーション実行が成功すれば一通りの土台が完成です。

### テストユーザーの作成
ログインを確認するためにテストユーザーをシーディングで作成します。
```
./vendor/bin/sail artisan make:seeder UserSeeder
```
Factoryで作成します、各値はお好みで。
```UserSeeder.php
namespace Database\Seeders;

use App\Models\User;
use Illuminate\Database\Seeder;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;

class UserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        User::factory()->create([
            'name' => 'テスト氏名',
            'email' => 'mail@example.com',
        ]);
    }
}
```
データ作成します。
```
./vendor/bin/sail artisan db:seed --class=UserSeeder
```

# ログイン処理の確認
フロントエンドとバックエンドの構築ができたのでログインを試してみましょう。先ほど作成したデータの値を入力します。(シーディング時のパスワードのデフォルト値は「password」です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/149813d6-4a68-1383-1a2e-5735c852cc00.png)
はい、ログインできました。ログイン画面とその先のコンテンツの土台が準備されてるのはめちゃくちゃありがたいですね。開発工数の短縮になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/09710efc-fc78-20d1-3c13-6d641f5426b3.png)
最後にログアウトも確認しておきます。右上のメニューからログアウト。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/0ebb6958-2b35-3942-cc9b-5e12231510d1.png)

問題なくログアウトもできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/171e9722-855e-c7fd-a917-08e11d3bba52.png)

あとはこの土台に沿って機能を載せていくだけですね。あっという間でした!!

# まとめ
最後までご覧いただきありがとうございます。冒頭で紹介した通り、このリポジトリではユーザーの新規登録などBreezeが提供する認証機能は準備されているので試してみてください。
今回はローカルでの内容でしたが、ぜひサーバーへのデプロイまでチャレンジしてみることをおすすめします（私は0vercel, herokuを採用することが多いです）。サーバーデプロイにはさらに周辺知識も必要になるのでそこら辺も記事に起こしてみようかなと思います。