Nextjs App Router

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>
}) {
  const { locale, slug } = await params
  setRequestLocale(locale)
  // ...
}

2. Promise.all (TOI UU - khi can ca hai)

export default async function BlogPage({
  params,
  searchParams,
}: {
  params: Promise<{ locale: string }>
  searchParams: Promise<{ page?: string; tag?: string }>
}) {
  // ✅ Toi uu: Await cung luc
  const [{ locale }, { page = '1', tag }] = await Promise.all([
    params,
    searchParams,
  ])
  
  setRequestLocale(locale)
  const posts = await getBlogPosts(locale, 'published', {
    page: parseInt(page),
    tag,
  })
  
  return <BlogList posts={posts} />
}

3. Streaming voi Suspense

import { Suspense } from 'react'

export default function BlogPage({ searchParams }: Props) {
  return (
    <div className="container">
      <Header />
      <Suspense fallback={<BlogPostsSkeleton />}>
        <BlogPosts searchParams={searchParams} />
      </Suspense>
      <Footer />
    </div>
  )
}

function BlogPostsSkeleton() {
  return (
    <div className="space-y-4">
      <div className="h-6 w-1/4 animate-pulse bg-gray-200" />
      <div className="h-4 w-1/2 animate-pulse bg-gray-200" />
      <div className="h-32 w-full animate-pulse bg-gray-200" />
    </div>
  )
}

React Compiler (Next.js 16)

Tu dong memoization, khong can useMemo/useCallback thu cong:

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

Go y repo-specific

• Blog: dung getBlogPosts, getBlogPost tu @/services/blog-service.
• Docs: dung getPublicDocBySlug tu @/services/docs-service + render runtime bang @/components/docs/mdx-remote.

Khong duoc lam

• Khong destructure params truc tiep trong signature (vi params la Promise o Next.js 16).
• Khong hardcode English string cho UI.
• Khong sua apps/web/src/lib/core/** va apps/web/src/components/ui/**.