# Unfriendly URL slug in Next.js

> How to fix unfriendly url slug in Next.js — with the exact fix and copy-paste code.

_Category: Search visibility · Detector `seo` · Check `slug-unfriendly` · Severity: info_

A URL like /Blog_Post_00f3a2b1 is hard to read, hard to share, and gives search engines no keyword signal. Clean, human-readable slugs get more clicks when the URL shows in results and are easier to link to. AI-built apps frequently route by database ID or UUID and keep underscores or camelCase from variable names.

## The fix for Next.js

Folder and dynamic-segment names become the URL. Name the `[slug]` segment from a clean slug field, not an id.

_Route by slug, not id_

```bash
app/blog/[slug]/page.tsx      # /blog/scaling-postgres  ✅
app/blog/[id]/page.tsx        # /blog/00f3a2b1          ❌
```

### Steps

1. Add a slugify step that lowercases and hyphenates titles
2. Route by the clean slug (optionally slug + id)
3. 301-redirect old ID/underscore URLs to the new slug

## How VibeCheck detects it

The `seo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Unfriendly URL slug`
- **Threshold:** path contains a UUID, underscore, or capital letters

## FAQ

### Hyphens or underscores in URLs?

Hyphens. Google treats hyphens as word separators but underscores as joiners, so “scaling_postgres” reads as one token while “scaling-postgres” reads as two words.

### Can I keep the database ID in the URL?

You can pair it with a readable slug (/blog/scaling-postgres-42), but a bare ID or UUID is unfriendly. If you change the scheme, 301-redirect the old URLs.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/unfriendly-url-slug.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/unfriendly-url-slug. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt