Zenn
🙌

レンタルサーバーでNext.js（SSG）×PHP APIを運用するという、ちょっと珍しい構成の話…

に公開
Next.js
PHP
React
tech

レンタルサーバーで Next.js（SSG）×PHP API を運用するという、ちょっと珍しい構成の話

こんにちは、今回は少し珍しい開発構成を紹介します。

Next.js（SSG）で作ったサイトを、レンタルサーバーにデプロイし、バックエンド API は public フォルダ内の PHP で構築する。

そんな構成で開発・運用しています。

🧱 なぜこの構成？

  • 既にレンタルサーバー（例：エックスサーバー、さくらなど）を契約していた
  • Node.js や Vercel の環境が用意出来なかった
  • コストを抑えたかった

つまり「Next.js の魅力である SSG（Static Site Generation）を活かしつつ、バックエンドはレンタルサーバーの PHP で完結させる」という狙いです。

🧪 開発環境の構成

開発時には、concurrentlyを使用して Next.js と PHP サーバーを並行して起動します。

package.json のスクリプト例：

package.json
{
  "scripts": {
    "dev": "concurrently \"npm run next\" \"npm run php\"",
    "next": "next dev",
    "php": "php -S localhost:8000 -t public"
  }
}
  • next dev → localhost:3000
  • php -S → localhost:8000

これで、フロントとバックエンドの同時起動が簡単にできます。

concurrentlyとは？

concurrently は、複数のコマンドを同時に実行できる便利なツールです。この例では、next dev（Next.js の開発サーバー）と php -S（PHP のビルトインサーバー）を並行して起動しています。
concurrently を使うことで、複数のプロセスを 1 つのターミナルで管理でき、開発効率が向上します。インストールは以下のコマンドで行えます：

npm install concurrently --save-dev

これにより、複数のサーバーを簡単に起動・管理できる環境が整います。

🔗 Next.js から PHP API にアクセスする方法

PHP（public/api.php）側：

api.php
<?php
header('Access-Control-Allow-Origin: http://localhost:3000');
header('Content-Type: application/json');

echo json_encode(['message' => 'Hello from PHP']);

Next.js（React 側）：

typescript
const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/api.php`);
const data = await res.json();

開発時はポートが異なるため、CORS の許可設定が必要です。

⚙️ API のベースパスは環境変数で管理する

Next.js の環境変数を使用して、API のベースパスを管理します。

next.config.js
/** @type {import('next').NextConfig} */

const isDev = process.env.NODE_ENV === "development";
const basePath = isDev ? "http://localhost:8000" : "";

const nextConfig = {
  output: "export",
  env: {
    NEXT_PUBLIC_API_BASE_PATH : basePath,
  },
};

export default nextConfig;

コード例：

typescript
const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_PATH}/api.php`);

これにより、開発と本番の切り替えが容易になります。

🌍 本番環境での構成

  1. next build で静的ファイルを生成（SSG）
  2. out フォルダをレンタルサーバーにアップロード
  3. 同一ドメイン内で PHP API が動作

🤔 この構成のメリット・デメリット

✅ メリット

  • レンタルサーバーで完結する
  • PHP の資産や知識を活かせる
  • Next.js の高速な静的出力を活かせる
  • サーバーレスや Node 環境が不要

❌ デメリット

  • 特殊な構成のため、情報が少ない
  • 複数ポートでの開発がやや煩雑（npm スクリプトで対応可能）
  • Next.js の API Routes は使えない

✍️ おわりに

この構成は少し特殊かもしれませんが、レンタルサーバーの制約下でも Next.js と PHP を両立 させることができます。

PHP との連携が求められるプロジェクトや、Vercel などを使わずにコストを抑えたい場面では、十分に実用的なアプローチです。

実際にこの構成で運用していて、何か気づきがあればぜひコメントください！

GitHubで編集を提案

Discussion