Ba pitfall Next.js App Router khiến tôi mất ngày

Migrate sang Next.js App Router unlock Server Components nhưng kèm bẫy mà docs không phải lúc nào cũng emphasize. Ba pattern đã burn tôi trong project đầu tiên:

1. params giờ là Promise

Trong Next.js 15+, route params là async. Quên await → trả về Promise thay vì object:

// ❌ Sai — params là Promise
export default function Page({ params }) {
  return <div>{params.slug}</div>;  // [object Promise]
}
 
// ✅ Đúng
export default async function Page({ params }) {
  const { slug } = await params;
  return <div>{slug}</div>;
}

2. Hardcoded locale string break i18n routing

Build site bilingual thì mọi <Link> internal đều cần locale prefix. href="/products" silently navigate sang default locale; href={\/$/products`}` mới đúng.

3. Server/Client boundary "dính"

Mark component "use client" thì TẤT CẢ import của nó vào client bundle. Muốn pass server-data prop vào client component? Pass qua children, đừng import trực tiếp.

Khi anh em embrace 3 pattern này, App Router click. Trước đó, chuẩn bị face hydration mismatch confusing.