Laravel(API)とReact(Next.js+TypeScript)で作るwebサービス構成

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

brew install nodejs

node -v
npm -v

npx create-next-app nextsample

//- TypeScriptの場合
npx create-next-app nextsample --typescript

Need to install the following packages:
  create-next-app@13.4.7
Ok to proceed? (y)

✔ Would you like to use ESLint with this project? … No / Yes [Yes]
✔ Would you like to use Tailwind CSS with this project? … No / Yes [No]
✔ Would you like to use `src/` directory with this project? … No / Yes [Yes]
✔ Use App Router (recommended)? … No / Yes [Yes]
✔ Would you like to customize the default import alias? … No / Yes [Yes]
✔ What import alias would you like configured? … [@/*]

npm run dev

php artisan make:controller TestController --api

    public function index()
    {
        return response()->json(['status' => 'ok']);
    }

Target class [**Controller] does not exist.

//useを追加
use App\Http\Controllers\TestController;

~~~

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

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      test
    </main>
  )
}

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      test
      <TestButton />
    </main>
  )
}

const TestButton = () => {
  return <button className='test-button'>GET</button>
}

.test-button{
  background-color: rgb(81, 125, 174);
  color: white;
  padding: 0.8rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

'use client';

let result: string = 'none';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      <p id="result-field">{result}</p>
      <TestButton />
    </main>
  )
}

const TestButton = () => {
  return <button className='test-button' onClick={ GetRequest } data-url='http://localhost:8888/LaravelSample/public/api/test'>GET</button>
}

async function GetRequest(e: React.MouseEvent) {
  const targetURL = e.currentTarget.getAttribute('data-url');
  if(targetURL == null || targetURL == '')
    alert('URLError!');
  else{
    await fetch(targetURL, {
        method: 'GET'
      }).then(
          response => {
            if (response.status != 200) {
                  alert('エラー');
              } else {
                  return response.json();
              }
          }
      )
      .then((jsonData) => {
          if (jsonData != null) {
              const status = jsonData['status'];
              if ( status == 'ok') {
                  result = status;
              } else {
                result = 'ステータスエラー';
              }
          } else {
              result = 'レスポンスエラー';
          }
      })
      .catch(error => {
          result = 'catch!';
      });
    let resultField = document.getElementById('result-field');
    if(resultField)
      resultField.innerText = result;
  }
}