HIGHArchitecturemediumNext.js + Supabase Standards

Use route groups to organize app sections

Organize routes using parenthesized layout groups like (auth), (dashboard), (content), (marketing) for separate layouts and clear separation of concerns.

Why This Matters

Without route groups, the app directory becomes a flat list of routes that share the same layout. This makes it impossible to have different layouts per section and harder to navigate as the app grows.

Related Rules

Colocate page files with their route segment

Architecture

MEDIUM

Use (select auth.uid()) instead of auth.uid() in policies

Performance

MEDIUM

Use kebab-case for file and directory names

Quality

MEDIUM

Keep server actions in dedicated files

Architecture

HIGH

Catch this automatically on every PR

BeforeMerge scans your pull requests against this rule and 2+ others. Get actionable feedback before code ships.

Join Waitlist Browse All Rules

Why This Matters

Route groups in Next.js App Router allow you to:

Apply different layouts per section (auth has minimal layout, dashboard has sidebar)
Organize routes without affecting the URL structure
Keep the app/ directory scalable as you add more pages

Good

app/
  (auth)/login/page.tsx
  (dashboard)/overview/page.tsx
  (content)/rules/[slug]/page.tsx
  (marketing)/pricing/page.tsx

Bad

app/
  login/page.tsx
  overview/page.tsx
  rules/[slug]/page.tsx
  pricing/page.tsx

How to Fix

Create route groups by wrapping directory names in parentheses. The parentheses are stripped from the URL.

mkdir -p app/(auth) app/(dashboard) app/(content) app/(marketing)

Use route groups to organize app sections

Why This Matters

Tags

Related Rules

Catch this automatically on every PR

Why This Matters

Good

Bad

How to Fix