Laravel（バックエンド） + Next.js（フロントエンド）の構成例

API通信編ではjson-serverにてバックエンドを構築しましたが、より実践的にバックエンドをLaravelを用いた場合の構成例と各種設定について説明します。

結論 → Laravel を API サーバーとして使い、Next.js でフロントエンドを構築する！
データのやり取りは REST API または GraphQL を利用！

システム構成

Laravel（バックエンド）と Next.js（フロントエンド）は以下のように構成する！

my-project/
 ├── backend/       ← Laravel（API サーバー）
 ├── frontend/      ← Next.js（フロントエンド）

Laravel のセットアップ

Laravel プロジェクト作成

composer create-project --prefer-dist laravel/laravel backend

Laravel のプロジェクトフォルダが backend/ に作成される！

環境変数を設定（.env）

.env ファイルの設定

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
APP_DEBUG=true
APP_URL=http://localhost:8000

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mydatabase
DB_USERNAME=root
DB_PASSWORD=

環境に合わせて DB_* の設定を変更！

API の CORS（クロスオリジン）設定

backend/app/Http/Middleware/VerifyCsrfToken.php の except に api/* を追加

protected $except = [
    'api/*'
];

CORS を許可するために cors.php を設定

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'], // Next.js のURL
    'allowed_headers' => ['*'],
    'supports_credentials' => true,
];

フロントエンド（Next.js）からのリクエストを許可する！

Laravel API のエンドポイント作成

API ルート（backend/routes/api.php）

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/users', [UserController::class, 'index']);

UserController.php を作成

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class UserController extends Controller {
    public function index() {
        return response()->json(User::all());
    }
}

API で GET /api/users にアクセスすると、ユーザー一覧が取得できる！

Laravel のサーバーを起動

php artisan serve --host=127.0.0.1 --port=8000

API サーバーが http://127.0.0.1:8000 で動作する！
これで Laravel 側の準備は完了！

Next.js のセットアップ

Next.js プロジェクト作成

npx create-next-app@latest frontend

frontend/ に Next.js のプロジェクトが作成される！

API の取得を実装（フロントエンド）

frontend/app/page.tsx に API 通信を追加

"use client";
import { useEffect, useState } from "react";

export default function Home() {
  const [users, setUsers] = useState<{ id: number; name: string }[]>([]);

  useEffect(() => {
    fetch("http://127.0.0.1:8000/api/users") // Laravel の API
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Next.js から Laravel API (http://127.0.0.1:8000/api/users) にアクセス！
取得したユーザー一覧を画面に表示！

Next.js のサーバーを起動

cd frontend
npm run dev

http://localhost:3000 で Next.js が動作！
フロントエンド + バックエンドの連携完了！

本番環境用のコマンド

本番用にビルド

npm run build

ここでエラーが出るとエラー内容に応じて修正が必要になります。

buildができたら本番サーバーを起動します。

npm run start

これで本番環境の設定は完了です。

実際のアプリではWebサーバーの構築をnginxなどで行い、confファイルで各URLの役割を設定することで公開することになります。