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

はじめに

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

誤っている情報があればご教示いただけますと幸いです

前提

本記事では以下の前提で作業を進めていきます

• npmがインストール済み
• composerがインストール済み
• ローカルでの起動のため、サーバー環境での動作は範囲外
• Next.js14系
• Laravel11
• mac（windows環境の方は本記事の方法ですとWSL2が必要になります）

ゴール

本記事内容のゴールはNext.js + Laravelで作成するアプリケーションにてログイン・ログアウト処理ができるようになることです。想定するアプリケーションが提供する認証機能は以下のような感じです。

• ログイン、ログアウト（今回はここを扱います）
• ユーザー新規作成
• パスワード再設定
• メール認証

フロントエンドのセットアップ

では早速アプリケーションの構築をしていきましょう！
通常であればnpxコマンドでプロジェクトを１から作成するところですが、今回は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で開発されている方にはお馴染みの画面ですね。

ログイン画面もすでに用意されていますが、バックエンドが無いのでまだ動きません。

バックエンド構築

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

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を選択します。

テストコードの作成はしませんが、テストモジュールはPHPUnitにしておきます。

最後に作成されたマイグレーションファイルを実行するか訊かれるのでyesを入力します。

マイグレーション実行が成功すれば一通りの土台が完成です。

テストユーザーの作成

ログインを確認するためにテストユーザーをシーディングで作成します。

./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' => '[e-mail]',
        ]);
    }
}

データ作成します。

./vendor/bin/sail artisan db:seed --class=UserSeeder

ログイン処理の確認

フロントエンドとバックエンドの構築ができたのでログインを試してみましょう。先ほど作成したデータの値を入力します。(シーディング時のパスワードのデフォルト値は「password」です）

はい、ログインできました。ログイン画面とその先のコンテンツの土台が準備されてるのはめちゃくちゃありがたいですね。開発工数の短縮になります。

最後にログアウトも確認しておきます。右上のメニューからログアウト。

問題なくログアウトもできました。

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

まとめ

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