Laravel Breeze+Next.jsのインストールと認証機能の作成 | アントレプログラマー

Laravel Breeze+Next.jsのインストールと認証機能の作成

Laravel

こんにちは、ニキです。

以下の前提で進めます。

  • Laravelアプリケーションを作成済み
  • データベースへの接続情報を設定済み
  • データベースのマイグレーションを実行済み

以下の記事で開発環境の構築から解説しています。

今回の記事では、Laravel Breeze+Next.jsのインストールと認証機能の作成する方法を解説します。Next.jsのインストールにlaravel/breeze-nextリポジトリを利用し、TypeScript化やMITライセンスの扱いにも触れます。

Takaharu Niki

・Webエンジニア5年目。
・バックエンドを中心に、フロントエンドやDevOps業務も経験。
・現在は、自社サービス企業のテックリードとして従事。

Takaharu Nikiをフォローする

環境情報

  • 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に記載がある場合が多いので、このファイルをそのままにしておきます。

著作権表示と許諾表示は以下のとおりに記載します。

The MIT License
CopyrightPermissionisherebygranted,freeofcharge,toanypersonobtainingacopyofthissoftwareandassociateddocumentationfiles(the“Software…

不要なファイルは削除しておきます。

  • .github
  • RELEASE.md

まとめ

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

効率的に学習するならプログラミングスクールの検討もありです。

さらに詳しく学びたい方は、以下の書籍がおすすめです。

PHPフレームワークLaravel Webアプリケーション開発 バージョン8.x対応

既にLaravelの基本を知っていてスキルアップを図りたい開発者にとって、かなりおすすめです。クリーンなコーディング、保守性、テストの容易さなど、Laravelの提供する現代的なWeb開発のベストプラクティスを体系的に学べる内容が含まれています。

Takaharu Niki

・Webエンジニア5年目。
・バックエンドを中心に、フロントエンドやDevOps業務も経験。
・現在は、自社サービス企業のテックリードとして従事。

Takaharu Nikiをフォローする
Laravel
Takaharu Nikiをフォローする
アントレプログラマー
タイトルとURLをコピーしました