@uidu/skills 0.2.0

package/skills/uidu-workspace/iteration-2/eval-7-routing-gotcha/without_skill/outputs/answer.md

@@ -0,0 +1,131 @@
+# Diagnostic: `favicon.ico` Hitting Your Story Detail Page
+
+## What's Actually Going On
+
+Your route `src/app/[id]/page.tsx` is a **catch-all-at-root dynamic segment**. In Next.js App Router, `[id]` at the root of `app/` matches **any single path segment** at the root of your domain — including requests for static assets that the browser auto-requests.
+
+When a browser loads your site, it (and crawlers, bots, devtools, link previewers) automatically request:
+
+- `/favicon.ico`
+- `/robots.txt`
+- `/sitemap.xml`
+- `/apple-touch-icon.png`
+- `/apple-touch-icon-precomposed.png`
+- `/.well-known/*` (in some cases)
+- Various crawler probes (`/wp-admin`, `/.env`, etc.)
+
+If you do not have a physical file at `app/favicon.ico` (or a matching `app/robots.txt`, etc.), **Next.js falls through to the dynamic route** `[id]` and renders `page.tsx` with `params.id = 'favicon.ico'`. Your page then calls something like `getStory({ id: 'favicon.ico' })` against the uidu GraphQL API, which returns a "not found" error — hence the GraphQL errors in your logs.
+
+This is **not a uidu SDK bug** — it's a Next.js routing gotcha. Putting a dynamic segment at the root of `app/` is one of the most common footguns in App Router because the root namespace is shared with static asset conventions, metadata files, and crawler probes.
+
+### Why It Works for Real IDs
+
+For `/abc123`, there's no file at `app/abc123` and `abc123` is a valid story ID in your CMS, so the GraphQL query resolves and the page renders. The route was always firing for *every* root-level path — you just didn't notice for valid IDs because the response was successful.
+
+---
+
+## How to Fix It
+
+The clean fix is to **move the dynamic segment under a static prefix** so the root namespace is reserved for actual root-level concerns (homepage, asset files, metadata routes).
+
+### Recommended File-Structure Change
+
+**Before (the problem):**
+```
+src/app/
+├── layout.tsx
+├── page.tsx                 # homepage (if any)
+└── [id]/
+    └── page.tsx             # matches /favicon.ico, /robots.txt, /anything
+```
+
+**After (recommended):**
+```
+src/app/
+├── layout.tsx
+├── page.tsx                 # homepage
+├── favicon.ico              # actual favicon file
+├── robots.ts                # or robots.txt
+├── sitemap.ts               # or sitemap.xml
+└── stories/
+    └── [id]/
+        └── page.tsx         # only matches /stories/:id
+```
+
+Then update internal links from `/${story.id}` to `/stories/${story.id}` (and add a redirect if you need to preserve old URLs — see below).
+
+### If You Must Keep IDs at the Root
+
+If the bare-root URL shape (`/abc123`) is a hard product requirement, layer in **defensive guards** instead of moving the route:
+
+1. **Add the static files Next.js looks for first.** Place these in `app/` so they short-circuit the dynamic route:
+   - `app/favicon.ico` (binary file)
+   - `app/robots.ts` or `app/robots.txt`
+   - `app/sitemap.ts` or `app/sitemap.xml`
+   - `app/apple-icon.png`, `app/icon.png` (see Next.js metadata file conventions)
+
+2. **Validate `params.id` in the page** before hitting GraphQL:
+   ```tsx
+   // src/app/[id]/page.tsx
+   import { notFound } from 'next/navigation';
+
+   const VALID_ID = /^[a-z0-9]{6,32}$/i; // adjust to your real ID shape
+
+   export default async function StoryPage({ params }: { params: Promise<{ id: string }> }) {
+     const { id } = await params;
+
+     // Bail out before the GraphQL call for anything that obviously isn't an ID
+     if (id.includes('.') || !VALID_ID.test(id)) {
+       notFound();
+     }
+
+     const story = await getStory({ id });
+     if (!story) notFound();
+     return <StoryView story={story} />;
+   }
+   ```
+
+3. **Use middleware** (`src/middleware.ts`) to reject obvious non-IDs before they reach the route:
+   ```ts
+   import { NextResponse, type NextRequest } from 'next/server';
+
+   export function middleware(req: NextRequest) {
+     const { pathname } = req.nextUrl;
+     // anything with a file extension at the root is not a story
+     if (/^\/[^/]+\.[a-z0-9]+$/i.test(pathname)) {
+       return new NextResponse(null, { status: 404 });
+     }
+   }
+
+   export const config = {
+     matcher: '/((?!_next|api).*)',
+   };
+   ```
+
+---
+
+## Recommended Action
+
+**Move the route to `src/app/stories/[id]/page.tsx`.** It's a five-minute change, eliminates the entire class of bug (favicon, robots, sitemap, crawler probes, `.well-known`, link-preview bots), and makes the URL structure self-documenting. Add a redirect in `next.config.ts` if you need to preserve old links:
+
+```ts
+// next.config.ts
+export default {
+  async redirects() {
+    return [
+      // optional: redirect bare IDs to /stories/:id
+      // only safe if you have a way to distinguish IDs from other root paths
+    ];
+  },
+};
+```
+
+Even with the move, **add `app/favicon.ico` and `app/robots.ts`** so the browser's auto-requests resolve cleanly with 200s instead of 404s.
+
+---
+
+## TL;DR
+
+- `app/[id]/page.tsx` at the root catches `/favicon.ico` and every other bare root request that isn't an explicit file or static route.
+- Next.js falls through to your dynamic route, you call `getStory({ id: 'favicon.ico' })`, GraphQL returns an error, your logs fill up.
+- **Fix:** move to `app/stories/[id]/page.tsx` and place the actual `favicon.ico`, `robots.ts`, `sitemap.ts` files in `app/`. If bare-root IDs are required, add metadata files + a regex guard in the page (or middleware).