fix: 🐛 show not found when deployed

e2e/app.spec.ts

@@ -6,6 +6,16 @@ test("has title", async ({ page }) => {
   await expect(page).toHaveTitle(/React Starter/);
 });
 
+test("not found", async ({ page }) => {
+  await page.goto("/lost");
+
+  await expect(page).toHaveTitle(/React Starter/);
+
+  await expect(
+    page.getByRole("heading", { name: "Error", level: 1 }),
+  ).toBeInViewport();
+});
+
 test.describe("external links", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");

src/routes/__root.tsx

@@ -24,4 +24,6 @@ const Root = () => {
   );
 };
 
-export const Route = createRootRouteWithContext()({ component: Root });
+export const Route = createRootRouteWithContext()({
+  component: Root,
+});

vercel.json

@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/"
+    }
+  ]
+}