🗒️

【第1回】Laravel11+Next15でAPI連携をテスト

2024/11/12に公開

Next.js

はじめに

はじめまして、熊本のシステム会社に入社して半年の新米エンジニアです。
会社のミッションを進めていく際にぶつかった課題を解決していくなかで、残しておきたいと思った対処法を備忘録として記事にあげていきます。
今回は、バックエンドをLaravel、フロントエンドをNext.jsとし、APIの連携をテストしたときに対処した事例を紹介します。

ミッションの概要

Laravel Framework 10 + Bootstrap 5で制作されたアプリケーションのフロントエンドをNext.jsに置き換えたいので、Laravel と Next のAPI連携について調査する。

参考にしたサイト

今回、API連携をテストする際に参考にしたサイトです。作業をしていくなかでぶつかった課題にポイントをおいて書いていきますので、詳細は添付のサイトを参照してください。

作業環境

Windows11 Pro
Google Chrome
Visual Studio Code
Composer
PHP 8.2.24
Laravel Framework 11.30.0
Next.js 15.0.3

課題１「routes/api.php」がない

参考サイトでは、APIルートを設定するために、「routes/api.php」ファイルにコントローラのメソッドをマッピングするようになっていますが、Laravel 11より、rourtes配下にapi.phpファイルがありません。
そこで、ターミナルで下記のコマンドを実行して、api.phpをインストールする必要があります。

php artisan install:api

課題２ APIルートの動作確認で文字化けする

ブラウザがGoogle Chromeの場合、「 http://localhost:8000/api/test 」でアクセスすると文字化けを起こしましたので、サイトを参考にして app/Http/Controllers/Controller.php にJSON_UNESCAPED_UNICODEを設定したレスポンスを返す関数を用意します。

Controller.php

<?php

namespace App\Http\Controllers;

use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;

class Controller extends BaseController
{
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
    
    public function jsonResponse($data, $code = 200)
    {
        return response()->json(
            $data,
            $code,
            ['Content-Type' => 'application/json;charset=UTF-8', 'Charset' => 'utf-8'],
            JSON_UNESCAPED_UNICODE
        );
    }
}

新しく作成したコントローラ TestController.php ファイルのJSONレスポンスとしてデータを返すreturn文を変更します。

TestController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{
    public function index()
    {
        // ダミーデータの配列を作成
        $data = [
            ['id' => 1, 'name' => '鈴木イチロウ', 'description' => 'Description for 鈴木イチロウ'],
            ['id' => 2, 'name' => '山田タロウ', 'description' => 'Description for 山田タロウ'],
            ['id' => 3, 'name' => '伊藤シンジ', 'description' => 'Description for 伊藤シンジ'],
        ];

        // JSONレスポンスとしてデータを返す
        return $this->jsonResponse($data);
    }
}

課題３ Next.jsからLaravel APIを呼び出すとCORSエラーになる

Next.js側のfrontendディレクトリに「app/api-test/page.tsx」ファイルを作成し、「npm run dev」で実行し、「 http://localhost:3000/api-test 」にアクセスすると、「'Access-Control-Allow-Origin' headerがありません。」というようなエラーが発生します。
これもapi.phpファイルと同様に、Laravel 11より「config/cors.php」が配置されていないためにおこるエラーで、ターミナルで下記のコマンドを実行して、cors.php を publishする必要があります。

php artisan config:publish cors

最後に

以上、３つの課題を解決することにより、Next.js から Laravel API を呼び出すことができました。

課題を解決するために、いろんなサイトを参考にして進めていきますが、コツとして公式サイトから引用されている方法を試してみるのが良いかと思います。