普段バックエンドの私がNext.jsで、Laravel APIとの連携を試してみる

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

npx create-next-app@latest frontend

Ok to proceed? (y)
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

cd backend
php artisan serve

PS D:\www\laranext.local\backend> php artisan serve

   INFO  Server running on 
http://127.0.0.1:8000
127.0.0.1.

  Press Ctrl+C to stop the server

cd frontend
npm run dev

PS D:\www\laranext.local\frontend> npm run dev

> frontend@0.1.0 dev
> next dev

   ▲ Next.js 14.0.4
   - Local:        http://localhost:3000

 ✓ Ready in 1684ms

php artisan make:controller TestController

<?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 response()->json($data);
    }
}

use App\Http\Controllers\TestController;

Route::get('/test', [TestController::class, 'index']);

'use client';
import React, { useState, useEffect } from 'react';

// APIレスポンスの型を配列にする
interface ApiResponseItem {
    id: number;
    name: string;
    description: string;
}

const ApiTest: React.FC = () => {
    const [data, setData] = useState<ApiResponseItem[]>([]);

    useEffect(() => {
        fetch('http://localhost:8000/api/test')
            .then(response => response.json())
            .then((data: ApiResponseItem[]) => setData(data))
            .catch(error => console.error('Error fetching data:', error));
    }, []);

    return (
        <div>
            <h1>API Test</h1>
            {data.length > 0 ? (
                <div>
                    <h2>Data Received</h2>
                    {data.map((item) => (
                        <div key={item.id}>
                            <h3>{item.name}</h3>
                            <p>{item.description}</p>
                        </div>
                    ))}
                </div>
            ) : (
                <p>Loading data...</p>
            )}
        </div>
    );
};

export default ApiTest;

'use client';
import React, { useState, useEffect } from 'react';

interface ApiResponseItem {
    id: number;
    name: string;
    description: string;
}

const ApiTest: React.FC = () => {
    const [data, setData] = useState<ApiResponseItem[]>([]);
    const [currentPage, setCurrentPage] = useState(0);

    useEffect(() => {
        fetch('http://localhost:8000/api/test')
            .then(response => response.json())
            .then((data: ApiResponseItem[]) => setData(data))
            .catch(error => console.error('Error fetching data:', error));
    }, []);

    const itemsPerPage = 1;
    const totalPages = Math.ceil(data.length / itemsPerPage);
    const currentPageData = data.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage);

    const goToNextPage = () => {
        setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages - 1));
    };

    const goToPreviousPage = () => {
        setCurrentPage((prevPage) => Math.max(prevPage - 1, 0));
    };

    return (
        <div>
            <h1>API Test</h1>
            {currentPageData.map((item) => (
                <div key={item.id}>
                    <h3>ID:{item.id} {item.name}</h3>
                    <p>{item.description}</p>
                </div>
            ))}
            <div>
                <button onClick={goToPreviousPage} disabled={currentPage === 0}>Previous</button>
                <button onClick={goToNextPage} disabled={currentPage === totalPages - 1}>Next</button>
            </div>
        </div>
    );
};

export default ApiTest;