.envの設定

公式には書いてないですが、開発間環境ではなく本番環境に設定を変更します。
.envファイルをこのように書き換えて切り替えます。
APP_ENVをloca→productionにします。

.env

#APP_ENV=local
APP_ENV=production

バックエンド側の設定

bootstrapディレクトリにある、"app.phpを公式ドキュメントと同じように編集します"
"->withExceptions(function (Exceptions $exceptions) {})->create();"
の部分がデフォルトでは何も書かれてないのでここにカスタムエラーページへ飛ばす処理を書きます。
公式通りに書けばOKです。

app.php


//省略//


use Illuminate\Http\Request;//カスタムエラーページで使用
use Symfony\Component\HttpFoundation\Response;//カスタムエラーページで使用
use Inertia\Inertia;//カスタムエラーページで使用


//省略//


->withExceptions(function (Exceptions $exceptions) {
        //カスタムエラーページの処理
        $exceptions->respond(function (Response $response, Throwable $exception, Request $request) {
            if (! app()->environment(['local', 'testing']) && in_array($response->getStatusCode(), [500, 503, 404, 403])) {
                return Inertia::render('Error', ['status' => $response->getStatusCode()])
                    ->toResponse($request)
                    ->setStatusCode($response->getStatusCode());
            } elseif ($response->getStatusCode() === 419) {
                return back()->with([
                    'message' => 'The page expired, please try again.',
                ]);
            }
    
            return $response;
        });
    })->create();

フロントエンドエラーページ作成

Pageディレクトリに"Error.tsx"を新規作成します。
そして、中身をこのように編集します。
基本は公式通りですが、typescriptだとエラーが出たので"status"に
型(number)を宣言するように少し書き換えています。

Error.tsx

export default function ErrorPage({ status }:{status:number}) {
    const title = {
      503: '503: Service Unavailable',
      500: '500: Server Error',
      404: '404: Page Not Found',
      403: '403: Forbidden',
    }[status] 
  
    const description = {
      503: 'Sorry, we are doing some maintenance. Please check back soon.',
      500: 'Whoops, something went wrong on our servers.',
      404: 'Sorry, the page you are looking for could not be found.',
      403: 'Sorry, you are forbidden from accessing this page.',
    }[status] 
  
    return (
      <div>
        <h1>{title}</h1>
        <div>{description}</div>
      </div>
    )
  }

キャッシュのクリア

これでカスタムエラーページは完成ですが、うまく表示されない時は
以下の3つのコマンド実施し、キャッシュをクリアしてください。

php artisan view:clear
php artisan config:clear
php artisan cache:clear

以上です。