バックエンドとフロントエンドがつながっている箇所

はじめに

現在、個人開発でバックエンドとフロントエンドの環境構築がひと通り完了しました。
ただ、「この二つがどこでつながっているのか」を曖昧なまま進めてしまっていた部分も多く、振り返りの意味も込めて、この記事を書くことにしました。

注
現時点では環境構築のみを行っており、画面には簡単な文字を表示している段階のため
今後、機能追加や実装の進展に伴い、内容が変更される可能性があります。

この記事の対象者

• フロントエンドとバックエンドの連携部分について、理解が曖昧な方

技術スタック

フロントエンド
Next.js
TypeScript
React
バックエンド
PHP
Laravel
(バックエンドはDockerを使用)

バックエンドとフロントエンドがつながっている箇所

バックエンドとフロントエンドがつながっている具体点は3か所

1. API エンドポイント（URL）
2. 環境変数（API_BASE_URL）
3. HTTP リクエスト（fetch）

① 一番コア：API エンドポイント

バックエンド（Laravel）

backend/src/routes/api.php

Route::get('/health', function () {
    return ['status' => 'ok'];
});

これで Laravel は👇を待ち受けている。

GET http://localhost:8000/api/health

フロントエンド（Next.js）

frontend/src/lib/api.ts

fetch(`${API_BASE_URL}/health`);

ここで 同じ URL にリクエストを送っている。

👉 URL が一致した瞬間につながる

② 橋渡し役：環境変数

フロントエンド側

.env.local

NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/api

これが👇になる。

frontend/src/lib/api.ts

const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;

つまり表でまとめると以下のようになる。

役割	内容
フロント	API_BASE_URL を知る
バック	/api/health を待つ

👉 *URL を共有しているだけ

③ 実際の通信：HTTP（fetch）

frontend/src/lib/api.ts

const res = await fetch(`${API_BASE_URL}/health`);

ここで起きていること👇

1. ブラウザが localhost:8000 に通信
2. Laravel がリクエストを受信
3. JSON を返す
4. Next.js が受け取って表示

---

全体を1枚の図で書くと以下のようになります。

[ Browser / Next.js ]
        |
        |  GET /api/health
        |  http://localhost:8000
        v
[ Laravel API ]
        |
        |  return { status: "ok" }
        v
[ Browser / Next.js ]

---

「つながってる」って勘違いしやすい点

❌ Docker が勝手につないでいる

❌ Next.js と Laravel が特別な連携をしている

❌ 同じリポジトリだからつながる

本当の正体

ただの HTTP 通信

• REST API
• JSON
• URL

超シンプル。

---

じゃあ、コード上の「接点」はどこ？

接点となっているのは、フロントエンドからバックエンドへ
HTTP リクエストを送信している API 通信の部分です。

今回は疎通確認として、バックエンドの /health エンドポイントを
フロントエンドから呼び出しています。

フロントエンド側

frontend/src/lib/api.ts

// 環境変数
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;

// バックエンドの疎通確認用 API（/health）を呼び出す関数
export async function fetchHealth() {

// HTTP リクエスト
const res = await fetch(`${API_BASE_URL}/health`);

// レスポンスを JSON として返却
return res.json();
}

frontend/src/app/page.tsx

import { fetchHealth } from '@/lib/api';

// バックエンドの /health エンドポイントを呼び出して疎通確認
const data = await fetchHealth();

// レスポンス使用
data.status

※ 本例では、Next.js の Server Component から API を呼び出しています。

バックエンド側

backend/src/routes/api.php

// ヘルスチェック用のエンドポイント
Route::get('/health', function () => ['status' => 'ok']);

まとめ

フロントエンドとバックエンドは
API エンドポイント（URL）を通じた HTTP 通信によって接続されています。
フロントエンドは環境変数で API の URL を保持し、fetch を用いてリクエストを送信して
バックエンドは routes/api.php で定義したエンドポイントで受け取ります。

この記事を見て少しでも参考になる方がいらっしゃれば幸いです。