Next.js で PHP バックエンドと SPA 通信する方法

Next.js（フロントエンド）と PHP（バックエンド）を連携させて、ボタンクリックでデータを取得するSPA的な通信処理を構築します。

📌 構成イメージ

✅ Next.js側のコード例（app/dog/page.tsx）

'use client';

import { useState } from 'react';

export default function DogPage() {
  const [response, setResponse] = useState('');
  const [loading, setLoading] = useState(false);

  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await fetch('http://localhost/next_demo2/backend/backend1.php');
      if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
      const data = await res.json();
      setResponse(JSON.stringify(data, null, 2));
    } catch (error) {
      setResponse('エラーが発生しました: ' + error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold mb-4">PHPと通信するNext.jsデモ</h1>
      <button
        className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"
        onClick={fetchData}
        disabled={loading}
      >
        {loading ? '通信中...' : 'PHPからデータ取得'}
      </button>
      <pre className="mt-4 bg-gray-100 p-4 rounded text-sm">{response}</pre>
    </main>
  );
}

✅ PHP側のコード例（backend/backend1.php）

<?php
// CORS（クロスオリジン）対応
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

// ダミーデータを返す
$response = [
  'message' => 'こんにちは、Next.jsからのアクセスです！',
  'time' => date('Y-m-d H:i:s')
];

echo json_encode($response);

🔒 CORS対応について

Next.jsとPHPは別ポートで動いているため、fetch()で通信するにはPHP側で CORS を許可する必要があります。

開発中は Access-Control-Allow-Origin: * でOKですが、本番環境では許可するドメインを限定しましょう。

🧪 実行手順

  1. Next.js側で yarn dev を実行し、http://localhost:3000/dog にアクセス
  2. 「PHPからデータ取得」ボタンを押す
  3. PHPのレスポンス（JSON）が画面に表示されれば成功

💡 応用のヒント