Colocate page files with their route segment | BeforeMerge Rules | BeforeMerge

Colocate page files with their route segment | BeforeMerge Rules | BeforeMerge

Why This Matters

Colocating route files keeps related logic together:

page.tsx — the route component
loading.tsx — loading UI (automatic Suspense boundary)
error.tsx — error boundary
layout.tsx — shared layout

Good

app/(content)/rules/[slug]/
  page.tsx
  loading.tsx
  error.tsx

Bad

app/(content)/rules/[slug]/page.tsx
components/rules/RuleLoading.tsx   # loading state far from page
utils/rules/fetchRule.ts           # data fetching far from page