● inertiaのインストール

composer require inertiajs/inertia-laravel

● npmパッケージ inertis / react / typescript のインストール

npm i react react-dom @inertiajs/inertia @inertiajs/inertia-react
npm i -D @vitejs/plugin-react
npm i -D typescript @types/react @types/react-dom

● tsconfig.jsonを生成する

./node_modules/.bin/tsc --init --jsx react

vi tsconfig.json

以下の内容で保存

{
  "compilerOptions": {
    "target": "esnext",
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "types": ["vite/client"]
  }
}

vite.config.js の設定を変更する

vi vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import { renameSync } from 'fs';

export default defineConfig({
  plugins: [
    react(),
    {
      name: 'move-manifest',
      closeBundle() {
        // .viteフォルダ内のmanifest.jsonをpublic/buildに移動
        const oldPath = resolve(__dirname, 'public/build/.vite/manifest.json');
        const newPath = resolve(__dirname, 'public/build/manifest.json');
        try {
          renameSync(oldPath, newPath);
        } catch (error) {
          console.error('Failed to move manifest.json:', error);
        }
      },
    },
  ],
  build: {
    outDir: 'public/build',
    manifest: true,
    rollupOptions: {
      input: 'resources/ts/app.tsx',
    },
    assetsDir: 'vite', // アセットディレクトリを`vite`に指定
  },
  server: {
    host: true, // これにより、開発サーバーがネットワーク上でアクセス可能になります
  },
});

● フォルダ名を変更する

mv resources/js resources/ts

vi resources/ts/app.tsx 

import "./bootstrap";
import "../css/app.css";
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} />);
    },
});

routes/web.php

/inertia というエンドポイントを作成する

Route::get('/inertia', function () {
    return view('inertia');
});