feat: React Router の基本構成を追加

Next.js から React Router への移行準備として、基本的な設定ファイルとエントリーポイントを追加しました。
Cloudflare Workers でのデプロイを前提とした構成になっています。

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+/node_modules/
+*.tsbuildinfo
+
+# React Router
+/.react-router/
+/build/
+
+# Cloudflare
+.mf
+.wrangler
+.dev.vars*
+

apps/web/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"files.associations": {
+		"wrangler.json": "jsonc"
+	}
+}

apps/web/README.md

@@ -0,0 +1,79 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Previewing the Production Build
+
+Preview the production build locally:
+
+```bash
+npm run preview
+```
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+Deployment is done using the Wrangler CLI.
+
+To build and deploy directly to production:
+
+```sh
+npm run deploy
+```
+
+To deploy a preview URL:
+
+```sh
+npx wrangler versions upload
+```
+
+You can then promote a version to production after verification or roll it out progressively.
+
+```sh
+npx wrangler versions deploy
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.

apps/web/app/app.css

@@ -0,0 +1,15 @@
+@import "tailwindcss" source(".");
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}

apps/web/app/entry.server.tsx

@@ -0,0 +1,43 @@
+import { isbot } from "isbot";
+import { renderToReadableStream } from "react-dom/server";
+import type { AppLoadContext, EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
+
+export default async function handleRequest(
+	request: Request,
+	responseStatusCode: number,
+	responseHeaders: Headers,
+	routerContext: EntryContext,
+	_loadContext: AppLoadContext,
+) {
+	let shellRendered = false;
+	const userAgent = request.headers.get("user-agent");
+
+	const body = await renderToReadableStream(
+		<ServerRouter context={routerContext} url={request.url} />,
+		{
+			onError(error: unknown) {
+				responseStatusCode = 500;
+				// Log streaming rendering errors from inside the shell.  Don't log
+				// errors encountered during initial shell rendering since they'll
+				// reject and get logged in handleDocumentRequest.
+				if (shellRendered) {
+					console.error(error);
+				}
+			},
+		},
+	);
+	shellRendered = true;
+
+	// Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+	// https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+	if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
+		await body.allReady;
+	}
+
+	responseHeaders.set("Content-Type", "text/html");
+	return new Response(body, {
+		headers: responseHeaders,
+		status: responseStatusCode,
+	});
+}

apps/web/app/root.tsx

@@ -0,0 +1,75 @@
+import {
+	isRouteErrorResponse,
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+} from "react-router";
+
+import type { Route } from "./+types/root";
+import "./app.css";
+
+export const links: Route.LinksFunction = () => [
+	{ rel: "preconnect", href: "https://fonts.googleapis.com" },
+	{
+		rel: "preconnect",
+		href: "https://fonts.gstatic.com",
+		crossOrigin: "anonymous",
+	},
+	{
+		rel: "stylesheet",
+		href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+	},
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en">
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<Meta />
+				<Links />
+			</head>
+			<body>
+				{children}
+				<ScrollRestoration />
+				<Scripts />
+			</body>
+		</html>
+	);
+}
+
+export default function App() {
+	return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+	let message = "Oops!";
+	let details = "An unexpected error occurred.";
+	let stack: string | undefined;
+
+	if (isRouteErrorResponse(error)) {
+		message = error.status === 404 ? "404" : "Error";
+		details =
+			error.status === 404
+				? "The requested page could not be found."
+				: error.statusText || details;
+	} else if (import.meta.env.DEV && error && error instanceof Error) {
+		details = error.message;
+		stack = error.stack;
+	}
+
+	return (
+		<main className="pt-16 p-4 container mx-auto">
+			<h1>{message}</h1>
+			<p>{details}</p>
+			{stack && (
+				<pre className="w-full p-4 overflow-x-auto">
+					<code>{stack}</code>
+				</pre>
+			)}
+		</main>
+	);
+}

apps/web/app/routes.ts

@@ -0,0 +1,3 @@
+import { index, type RouteConfig } from "@react-router/dev/routes";
+
+export default [index("routes/home.tsx")] satisfies RouteConfig;

apps/web/app/routes/home.tsx

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+import { Welcome } from "../welcome/welcome";
+import type { Route } from "./+types/home";
+
+export const meta: Route.MetaFunction = () => {
+	return [
+		{ title: "New React Router App" },
+		{ name: "description", content: "Welcome to React Router!" },
+	];
+};
+
+export const loader = ({ context }: Route.LoaderArgs) => {
+	return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
+};
+
+const Home: FC<Route.ComponentProps> = ({ loaderData }) => {
+	return <Welcome message={loaderData.message} />;
+};
+export default Home;