こんにちは、ニキです。
以下の前提で進めます。
- Laravelアプリケーションを作成済み
- データベースへの接続情報を設定済み
- データベースのマイグレーションを実行済み
以下の記事で開発環境の構築から解説しています。
今回の記事では、Laravel Breeze+Next.jsのインストールと認証機能の作成する方法を解説します。Next.jsのインストールにlaravel/breeze-nextリポジトリを利用し、TypeScript化やMITライセンスの扱いにも触れます。
環境情報
- Chip: Apple M1
- macOS: Ventura 13.2.1
- Node.js: 20.5.0
- npm: 9.8.0
アプリケーションの環境情報
- Laravel: 10.16.1
- Next.js: 13.0.3
Laravel Breezeのインストール
以下のようにLaravel Breezeをインストールします
composer require laravel/breeze --dev
composer.jsonが以下のように変更されます。
"require-dev": {
"fakerphp/faker": "^1.9.1",
"laravel/breeze": "^1.21",
"laravel/pint": "^1.0",
"laravel/sail": "^1.18",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^7.0",
"phpunit/phpunit": "^10.1",
"spatie/laravel-ignition": "^2.0"
},
php artisan breeze:installコマンドを実行すると、以下のように対話的にインストールが開始されます。今回は、Next.jsを利用する想定で返答しています。
php artisan breeze:install
Which stack would you like to install?
blade .......................................................................................................................................... 0
react .......................................................................................................................................... 1
vue ............................................................................................................................................ 2
api ............................................................................................................................................ 3
❯ 3
Would you like to install dark mode support? (yes/no) [no]
❯ yes
Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]
❯ no
マイグレーションを実行します。
php artisan migrate
Next.jsのインストール
続いて、Next.js側を構築するために、laravel/breeze-nextリポジトリを使います。
一からNext.jsをインストールする方法は以下の記事で解説しています。
このリポジトリはNext.jsをフロントエンドとし、Laravel Breezeのアプリケーション/認証スターターキットです。認証ボイラープレートのすべてはLaravel Sanctumを使って既に書かれています。Laravelのフロントエンドとしてすぐに開始できます。
This repository is an implementation of the Laravel Breeze application / authentication starter kit frontend in Next.js. All of the authentication boilerplate is already written for you – powered by Laravel Sanctum, allowing you to quickly begin pairing your beautiful Next.js frontend with a powerful Laravel backend.
引用 https://github.com/laravel/breeze-next#introduction
リポジトリをクローンします。
git clone https://github.com/laravel/breeze-next.git
依存関係をインストールします。
npm install
.env.example
を以下のように編集します。バックエンドのURLに合わせて調整します。
NEXT_PUBLIC_BACKEND_URL=http://localhost:8080
.env.example
をコピーした.env.local
を作成します。開発環境では.env.localがロードされます。
Typescriptをインストールします。
npm install --save-dev typescript
tsconfig.jsonを作成します。プロジェクトのルートディレクトリに作成します。アプリケーションを起動したタイミングで中身を自動で書いてくれます。
touch tsconfig.json
拡張子をjsからtsxへ変更します。もう少しスマートな方法があるかもしれません。
cd src
rename "s/js/tsx/;" components/*.js
rename "s/js/tsx/;" components/Layouts/*.js
rename "s/js/tsx/;" hooks/auth.tsx
rename "s/js/tsx/;" lib/axios.js
rename "s/js/tsx/;" pages/*.js
rename "s/js/tsx/;" pages/password-reset/\\[token\\].js
アプリケーションを起動します。
npm run dev
http://localhost:3000/
にアクセスして、以下のようであればバックエンド側との通信成功です。

Laravel Breeze+Next.jsの認証機能を確認
ホームページの右上のRegisterリンクをクリックすると、以下のようなユーザー登録ページへ遷移します。http://localhost:3000/registerへ直接アクセスしてもOKです。

以下のような値を入力し、REGISTERボタンを押下します
- Name: foo
- Email: foo@example.com
- Password: password
- Confirm Password: password
以下のようなダッシュボードページ(http://localhost:3000/dashboard
)へ遷移できれば、ユーザー登録成功です。

MITライセンスの扱い
MITライセンスを扱うのは難しくありません。簡単に言うと、著作権表示と許諾表示の記載義務を守ればOKです。laravel/breeze-nextリポジトリのようにLICENSE.mdに記載がある場合が多いので、このファイルをそのままにしておきます。
著作権表示と許諾表示は以下のとおりに記載します。

不要なファイルは削除しておきます。
- .github
- RELEASE.md
まとめ
今回の記事では、Laravel Breeze+Next.jsのインストールと認証機能の作成する方法を解説しました。Next.jsのインストールにlaravel/breeze-nextリポジトリを利用し、TypeScript化やMITライセンスの扱いやにも触れました。