Laravel + React + TypeScript + Inertia 環境構築手順(XAMPP + Bash) 2025年版

前提:

① Breeze + React + TypeScript を導入

cd /c/xampp/htdocs/react_laravel/dev
composer require laravel/breeze --dev
php artisan breeze:install react --typescript
yarn install

② Vue関連を削除(もし含まれていた場合)

yarn remove vue @vitejs/plugin-vue

③ React / Inertia / 型定義 を追加

yarn add react react-dom
yarn add @inertiajs/inertia @inertiajs/inertia-react
yarn add -D @vitejs/plugin-react @types/react @types/react-dom

④ Vite 設定ファイルを修正(vite.config.ts)

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
  server: {
    host: '127.0.0.1',
    port: 5173,
  },
  plugins: [
    laravel({
      input: ['resources/js/app.tsx'],
      refresh: true,
    }),
    react(),
  ],
});

⑤ .env にホストを追記

VITE_DEV_SERVER_HOST=127.0.0.1

⑥ app.tsx を作成

// resources/js/app.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/inertia-react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
  resolve: (name) =>
    resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

⑦ Bladeレイアウトを確認(resources/views/app.blade.php)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My App</title>
  @viteReactRefresh
  @vite(['resources/js/app.tsx'])
</head>
<body>
  @inertia
</body>
</html>

⑧ Helloページを作成

// resources/js/Pages/Hello.tsx
import React from 'react';
export default function Hello() {
  return <h1>Hello, World!</h1>;
}

⑨ ルート定義(routes/web.php)

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/hello', function () {
  return Inertia::render('Hello');
});

⑩ マイグレーション(必要に応じて)

php artisan migrate

⑪ Vite を起動

yarn dev

⑫ ブラウザで表示確認

http://localhost/react_laravel/dev/public/hello にアクセスして Hello, World! が表示されれば成功 🎉

💡 よくあるエラーと対処法

エラー原因対処
Class "Inertia\Inertia" not found Inertia Laravelが未インストール composer require inertiajs/inertia-laravel
View [app] not found app.blade.php がない 手動で作成
Vite manifest not found Viteビルド未実行 yarn dev
@inertiajs/inertia-react not found 依存パッケージ未導入 yarn add @inertiajs/inertia @inertiajs/inertia-react
GET http://[::1]:5173/〜 IPv6経由で接続できない .envVITE_DEV_SERVER_HOST=127.0.0.1 を追加