So sánh với Pages Router:

• Không cần getServerSideProps
• Không cần /api/metrics endpoint
• Không cần useState + useEffect để fetch
• Bundle size giảm vì không ship database client xuống browser

Server Actions — The Game Changer

Server Actions là feature thay đổi cách viết form và mutations hoàn toàn:

// app/actions/create-project.ts
'use server'

import { db } from '@/lib/db'
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'
import { z } from 'zod'

const CreateProjectSchema = z.object({
  name: z.string().min(1).max(100),
  description: z.string().optional(),
})

export async function createProject(formData: FormData) {
  const validated = CreateProjectSchema.safeParse({
    name: formData.get('name'),
    description: formData.get('description'),
  })

  if (!validated.success) {
    return { error: validated.error.flatten().fieldErrors }
  }

  const project = await db.insert(projects).values(validated.data).returning()
  revalidatePath('/dashboard')
  redirect(`/projects/${project[0].id}`)
}

// app/projects/new/page.tsx
export default function NewProjectPage() {
  return (
    <form action={createProject}>
      <input name="name" placeholder="Project name" />
      <textarea name="description" />
      <button type="submit">Create</button>
    </form>
  )
}

Tại sao Server Actions là revolution:

• Không cần fetch('/api/...') trong component
• Không cần API route handler riêng
• TypeScript types tự động flow từ server sang client
• Progressive enhancement: hoạt động ngay cả khi JS disabled
• CSRF protection built-in

PPR — Partial Prerendering (Next.js 15 Stable)

PPR là hybrid rendering model: render phần static ngay lập tức (0ms), stream phần dynamic vào sau.

// app/product/[id]/page.tsx
import { Suspense } from 'react'

// Phần static — render compile time
export default async function ProductPage({ params }) {
  return (
    <div>
      {/* Static: render ngay, cached forever */}
      <ProductHero productId={params.id} />

      {/* Dynamic: stream sau khi có data */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={params.id} />
      </Suspense>

      <Suspense fallback={<PricingSkeleton />}>
        <DynamicPricing productId={params.id} />
      </Suspense>
    </div>
  )
}

Kết quả: User nhìn thấy product info ngay lập tức (từ static cache), trong khi reviews và pricing load động. Perceived performance cực kỳ tốt mà không cần compromise trên dynamic data.

Turbopack — Dev Experience 5x Nhanh

Next.js 15 stable với Turbopack (Rust-based bundler):

# next.config.ts
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}

• Cold start: từ 4-8s xuống còn 0.7-1.2s
• HMR (Hot Module Replacement): từ 200-500ms xuống còn 20-50ms
• Trên codebase 1000+ modules, cảm giác hoàn toàn khác biệt

2. TypeScript: Type-Safety Không Phải Luxury — Đây Là Hạ Tầng

Tại Sao Team 5 Người Cần TypeScript Hơn Team 1 Người

Myth phổ biến: "TypeScript tốt cho big teams, startup nhỏ không cần."

Reality: Startup nhỏ cần TypeScript hơn vì:

1. Không có bandwidth để viết documentation đầy đủ
2. Context switch liên tục — bạn quên code của mình sau 2 tuần
3. Onboarding developer mới không có AI docs hỗ trợ
4. Refactoring không có type safety = gambling

// Không có TypeScript — bạn đoán mọi thứ
function processOrder(order) {
  // order.items là gì? order.userId là string hay number?
  // status có những giá trị nào?
  // Phải đọc database schema, đọc code nơi gọi hàm này
  return order.items.reduce((sum, item) => sum + item.price * item.qty, 0)
}

// Với TypeScript — tự documenting
interface OrderItem {
  productId: string
  name: string
  price: number        // cents, not dollars
  qty: number
  discount?: number    // 0-1 percentage
}

type OrderStatus = 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled'

interface Order {
  id: string
  userId: string
  items: OrderItem[]
  status: OrderStatus
  createdAt: Date
  shippedAt?: Date
}

function processOrder(order: Order): number {
  return order.items.reduce(
    (sum, item) => sum + item.price * item.qty * (1 - (item.discount ?? 0)),
    0
  )
}

Strict Mode — Không Phải Optional

tsconfig.json production-ready:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "ES2022"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": {
      "@/*": ["./*"]
    }
  }
}

strict: true bật 6 checks cùng lúc:

• strictNullChecks: Không thể dùng undefined mà không check
• strictFunctionTypes: Function parameter types phải khớp chặt
• strictBindCallApply: Type-check cho .bind(), .call(), .apply()
• noImplicitAny: Không được để TypeScript tự infer any
• strictPropertyInitialization: Class properties phải được init
• noImplicitThis: this phải có type rõ ràng

Utility Types Thực Tế trong MVP

// Từ database schema
type User = {
  id: string
  email: string
  passwordHash: string
  createdAt: Date
  updatedAt: Date
}

// Không bao giờ expose passwordHash ra ngoài
type PublicUser = Omit<User, 'passwordHash'>

// Khi tạo user mới — id, createdAt, updatedAt tự generate
type CreateUserInput = Omit<User, 'id' | 'createdAt' | 'updatedAt'>

// Khi update — mọi field đều optional
type UpdateUserInput = Partial<Omit<User, 'id' | 'createdAt'>>

// API Response wrapper type-safe
type ApiResponse<T> =
  | { success: true; data: T }
  | { success: false; error: string; code: number }

// React component với strict props
type ButtonProps = {
  variant: 'primary' | 'secondary' | 'danger'
  size: 'sm' | 'md' | 'lg'
  loading?: boolean
  onClick?: () => void
  children: React.ReactNode
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>

Zod + TypeScript: Schema Validation + Type Inference

import { z } from 'zod'

// Định nghĩa 1 lần — dùng cho cả validation lẫn TypeScript type
const CreateProjectSchema = z.object({
  name: z.string().min(1, 'Tên không được để trống').max(100),
  description: z.string().max(500).optional(),
  budget: z.number().min(0).max(1_000_000_000),
  deadline: z.string().datetime().optional(),
  tags: z.array(z.string()).max(10).default([]),
})

// TypeScript type tự động từ schema
type CreateProjectInput = z.infer<typeof CreateProjectSchema>

// Dùng trong Server Action
export async function createProject(input: CreateProjectInput) {
  // input đã được validate, TypeScript biết exact shape
}

3. PostgreSQL: Vô Đối Sau 35 Năm — Và Ngày Càng Mạnh Hơn

Tại Sao Không Dùng MongoDB, DynamoDB, hay PlanetScale?

Câu hỏi nghe quen thuộc. Câu trả lời sau khi migrating nhiều projects:

PostgreSQL wins on almost every dimension that matters for a startup that will eventually need to do complex queries.

JSONB — Linh Hoạt Như NoSQL, Mạnh Như Relational

-- Bảng users với JSONB metadata
CREATE TABLE users (
  id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email       TEXT UNIQUE NOT NULL,
  metadata    JSONB DEFAULT '{}',
  created_at  TIMESTAMPTZ DEFAULT NOW()
);

-- Tạo GIN index cho JSONB — query nhanh dù không biết structure trước
CREATE INDEX idx_users_metadata ON users USING GIN (metadata);

-- Insert với nested JSON
INSERT INTO users (email, metadata) VALUES (
  '[email protected]',
  '{"plan": "pro", "features": ["ai", "analytics"], "company": {"name": "ACME", "size": 50}}'
);

-- Query vào nested JSON
SELECT * FROM users
WHERE metadata->>'plan' = 'pro'
  AND metadata->'company'->>'size' > '20';

-- Update nested field mà không cần fetch rồi update toàn bộ document
UPDATE users
SET metadata = jsonb_set(metadata, '{company,size}', '100')
WHERE id = 'some-uuid';

-- Array operations
SELECT * FROM users
WHERE metadata->'features' ? 'ai';  -- có feature 'ai' trong array

JSONB cho phép bạn ship nhanh (không cần migrate schema mỗi lần thay đổi requirements) mà vẫn giữ được relational joins và ACID guarantees.

pgvector — PostgreSQL Trở Thành Vector Database

-- Install extension
CREATE EXTENSION IF NOT EXISTS vector;

-- Bảng documents với vector embeddings
CREATE TABLE documents (
  id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  content     TEXT NOT NULL,
  embedding   VECTOR(1536),  -- OpenAI ada-002 dimension
  metadata    JSONB DEFAULT '{}',
  created_at  TIMESTAMPTZ DEFAULT NOW()
);

-- HNSW index cho approximate nearest neighbor search
-- Nhanh hơn ivfflat, build time chậm hơn nhưng query nhanh hơn
CREATE INDEX ON documents USING hnsw (embedding vector_cosine_ops)
WITH (m = 16, ef_construction = 64);

-- Semantic similarity search (RAG)
SELECT
  content,
  metadata,
  1 - (embedding <=> $1::vector) AS similarity
FROM documents
WHERE 1 - (embedding <=> $1::vector) > 0.7  -- threshold
ORDER BY embedding <=> $1::vector
LIMIT 5;

Điều này có nghĩa là: bạn không cần Pinecone, Weaviate, hay Qdrant. PostgreSQL + pgvector đủ cho hầu hết RAG use cases của startup.

Window Functions và CTEs — Power Queries

-- Running total doanh thu theo ngày
SELECT
  DATE_TRUNC('day', created_at) AS day,
  SUM(amount) AS daily_revenue,
  SUM(SUM(amount)) OVER (ORDER BY DATE_TRUNC('day', created_at)) AS cumulative_revenue
FROM payments
WHERE status = 'completed'
GROUP BY 1
ORDER BY 1;

-- Top user mỗi tháng (ranking)
WITH monthly_activity AS (
  SELECT
    user_id,
    DATE_TRUNC('month', created_at) AS month,
    COUNT(*) AS action_count
  FROM user_events
  GROUP BY 1, 2
),
ranked AS (
  SELECT *,
    RANK() OVER (PARTITION BY month ORDER BY action_count DESC) AS rank
  FROM monthly_activity
)
SELECT * FROM ranked WHERE rank <= 10;

4. ORM Battle: Drizzle vs Prisma — Drizzle Thắng Rõ Ràng

Prisma: Quen Thuộc Nhưng Có Trade-offs

Prisma là ORM phổ biến nhất cho Node.js. Nhưng có những vấn đề thực tế:

Schema định nghĩa riêng (không phải TypeScript):

// schema.prisma — ngôn ngữ riêng, không phải TS
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  posts     Post[]
  createdAt DateTime @default(now())
}

Vấn đề với Prisma:

• Prisma Client generate code to /node_modules — slow cold starts (quan trọng với serverless/edge)
• n+1 problem nếu không dùng include đúng cách
• Bundle size lớn (~4MB unpacked)
• Edge Runtime không supported đầy đủ
• Schema riêng = learn thêm một "language"

Drizzle: TypeScript First, SQL Second

// schema.ts — Pure TypeScript, không phải DSL riêng
import { pgTable, uuid, text, timestamp, jsonb, vector } from 'drizzle-orm/pg-core'

export const users = pgTable('users', {
  id: uuid('id').primaryKey().defaultRandom(),
  email: text('email').unique().notNull(),
  metadata: jsonb('metadata').$type<{
    plan: 'free' | 'pro' | 'enterprise'
    features: string[]
  }>().default({}),
  createdAt: timestamp('created_at').defaultNow().notNull(),
})

export const documents = pgTable('documents', {
  id: uuid('id').primaryKey().defaultRandom(),
  content: text('content').notNull(),
  embedding: vector('embedding', { dimensions: 1536 }),
  userId: uuid('user_id').references(() => users.id, { onDelete: 'cascade' }),
  createdAt: timestamp('created_at').defaultNow().notNull(),
})

// TypeScript types tự động infer từ schema
export type User = typeof users.$inferSelect
export type NewUser = typeof users.$inferInsert

Drizzle queries — type-safe và gần SQL:

import { db } from '@/lib/db'
import { users, documents } from '@/lib/schema'
import { eq, and, gte, desc, sql } from 'drizzle-orm'

// Simple query
const user = await db.query.users.findFirst({
  where: eq(users.email, '[email protected]'),
})
// TypeScript biết: user là User | undefined

// Join query
const userWithDocs = await db
  .select({
    id: users.id,
    email: users.email,
    docCount: sql<number>`count(${documents.id})::int`,
  })
  .from(users)
  .leftJoin(documents, eq(users.id, documents.userId))
  .where(eq(users.id, userId))
  .groupBy(users.id, users.email)

// Semantic search với pgvector
const similarDocs = await db
  .select()
  .from(documents)
  .where(
    and(
      eq(documents.userId, userId),
      sql`1 - (${documents.embedding} <=> ${embedding}::vector) > 0.7`
    )
  )
  .orderBy(sql`${documents.embedding} <=> ${embedding}::vector`)
  .limit(5)

So sánh Drizzle vs Prisma:

Kết luận: Với Next.js 15 + Vercel Edge Functions + pgvector use cases, Drizzle là lựa chọn rõ ràng hơn.

Database Connection với Neon Serverless

// lib/db.ts
import { neon } from '@neondatabase/serverless'
import { drizzle } from 'drizzle-orm/neon-http'
import * as schema from './schema'

// HTTP-based connection — works in Edge Runtime
const sql = neon(process.env.DATABASE_URL!)
export const db = drizzle(sql, { schema })

// lib/db-pool.ts — cho long-running processes
import { Pool } from '@neondatabase/serverless'
import { drizzle } from 'drizzle-orm/neon-serverless'

const pool = new Pool({ connectionString: process.env.DATABASE_URL })
export const dbPool = drizzle(pool, { schema })

5. shadcn/ui + Tailwind CSS v4 — UI Layer Hoàn Hảo

shadcn/ui: Triết Lý Copy, Không Phải Install

shadcn/ui không phải component library theo nghĩa thông thường. Thay vì npm install shadcn-ui và nhận black box, bạn copy source code vào project:

npx shadcn@latest init
npx shadcn@latest add button card dialog form input table

Kết quả: Code component nằm trong components/ui/ của bạn, fully owned:

components/
├── ui/
│   ├── button.tsx      ← Source code bạn sở hữu
│   ├── card.tsx
│   ├── dialog.tsx
│   ├── form.tsx
│   └── table.tsx
└── custom/
    ├── ProjectCard.tsx  ← Compose từ ui components
    └── UserAvatar.tsx

Tại sao triết lý này thắng:

• Không bị lock vào library updates
• Có thể modify bất kỳ component nào theo business requirements
• TypeScript types rõ ràng vì bạn đọc source
• Bundle size chỉ gồm components bạn dùng
• Radix UI primitives underneath = accessibility built-in

Tailwind CSS v4 — Những Thay Đổi Quan Trọng

Tailwind v4 (2025) thay đổi nhiều so với v3:

/* tailwind.css — v4 config trong CSS, không phải JS */
@import "tailwindcss";

@theme {
  --color-primary: oklch(0.6 0.2 250);
  --color-primary-foreground: oklch(0.98 0 0);

  --font-sans: "Inter Variable", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  --spacing-container: 1280px;
}

/* Custom utility */
@utility flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// component sử dụng v4
export function Hero() {
  return (
    <section className="flex-center min-h-screen bg-primary text-primary-foreground">
      <div className="max-w-[--spacing-container] px-4">
        <h1 className="text-4xl font-bold font-sans">Hello World</h1>
      </div>
    </section>
  )
}

Những thay đổi v4 cần biết:

• Config chuyển sang CSS @theme — không còn tailwind.config.ts
• CSS variables thay thế hardcoded values — dark mode dễ hơn
• @utility directive cho custom utilities
• Vite plugin thay thế PostCSS cho performance
• oklch() color space support native

6. Auth: Supabase Auth vs Auth.js — Chọn Theo Use Case

Supabase Auth — Simple, Integrated, Đủ Mạnh

Khi nào chọn Supabase Auth:

• Đã dùng Supabase cho database (zero friction)
• Cần email/password + social logins nhanh
• Muốn Row Level Security (RLS) tích hợp auth
• Team nhỏ, không có DevOps

// lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll: () => cookieStore.getAll(),
        setAll: (cookiesToSet) => {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          )
        },
      },
    }
  )
}

// app/auth/login/actions.ts
'use server'

export async function login(formData: FormData) {
  const supabase = await createClient()
  const { error } = await supabase.auth.signInWithPassword({
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  })
  if (error) return { error: error.message }
  redirect('/dashboard')
}

// Row Level Security tự động protect data theo user
// Không cần viết WHERE user_id = auth.uid() trong mọi query

RLS với Drizzle (custom implementation):

// Middleware protect route
// middleware.ts
import { createServerClient } from '@supabase/ssr'
import { NextResponse } from 'next/server'

export async function middleware(request: NextRequest) {
  const supabase = createServerClient(/* ... */)
  const { data: { user } } = await supabase.auth.getUser()

  if (!user && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

Auth.js (NextAuth v5) — Khi Cần Control Cao Hơn

Khi nào chọn Auth.js:

• Cần custom session logic phức tạp
• Cần integrate với existing user database
• Cần Enterprise SSO (SAML, LDAP)
• Không muốn vendor lock-in với Supabase

// auth.ts — Auth.js v5 config
import NextAuth from 'next-auth'
import { DrizzleAdapter } from '@auth/drizzle-adapter'
import Google from 'next-auth/providers/google'
import GitHub from 'next-auth/providers/github'
import Credentials from 'next-auth/providers/credentials'
import { db } from '@/lib/db'

export const { handlers, signIn, signOut, auth } = NextAuth({
  adapter: DrizzleAdapter(db),
  providers: [
    Google,
    GitHub,
    Credentials({
      async authorize(credentials) {
        const user = await db.query.users.findFirst({
          where: eq(users.email, credentials.email as string)
        })
        if (!user) return null
        const valid = await bcrypt.compare(credentials.password as string, user.passwordHash)
        return valid ? user : null
      }
    })
  ],
  callbacks: {
    async session({ session, user }) {
      session.user.id = user.id
      return session
    }
  },
  pages: {
    signIn: '/login',
    error: '/auth/error',
  }
})

// app/api/auth/[...nextauth]/route.ts
export { handlers as GET, handlers as POST }

So sánh:

7. Production-Ready Boilerplate — Cấu Hình Thực Tế

Project Structure

├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   │   ├── page.tsx
│   │   │   └── actions.ts
│   │   └── register/
│   ├── (dashboard)/
│   │   ├── layout.tsx     ← Protected layout
│   │   ├── page.tsx
│   │   └── settings/
│   ├── api/
│   │   ├── webhooks/
│   │   │   └── stripe/route.ts
│   │   └── ai/
│   │       └── chat/route.ts
│   ├── globals.css
│   ├── layout.tsx         ← Root layout
│   └── page.tsx           ← Landing page
├── components/
│   ├── ui/                ← shadcn/ui components
│   └── features/          ← Business logic components
├── lib/
│   ├── db.ts              ← Drizzle client
│   ├── schema.ts          ← Database schema
│   ├── auth.ts            ← Auth config
│   └── utils.ts           ← cn(), formatDate(), etc.
├── hooks/
│   └── use-toast.ts
├── types/
│   └── index.ts           ← Shared TypeScript types
├── middleware.ts           ← Auth protection
├── drizzle.config.ts
├── next.config.ts
└── tailwind.css

Environment Variables — Đừng Bỏ Sót

# .env.local — Development
DATABASE_URL="postgresql://..."
NEXT_PUBLIC_SUPABASE_URL="https://xxx.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJ..."
SUPABASE_SERVICE_ROLE_KEY="eyJ..."

# Stripe
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."

# Email
RESEND_API_KEY="re_..."
FROM_EMAIL="[email protected]"

# AI
OPENAI_API_KEY="sk-..."
ANTHROPIC_API_KEY="sk-ant-..."

# App
NEXTAUTH_SECRET="random-32-char-string"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

Error Handling Pattern

// lib/errors.ts
export class AppError extends Error {
  constructor(
    message: string,
    public code: string,
    public statusCode: number = 400
  ) {
    super(message)
    this.name = 'AppError'
  }
}

export class NotFoundError extends AppError {
  constructor(resource: string) {
    super(`${resource} not found`, 'NOT_FOUND', 404)
  }
}

export class UnauthorizedError extends AppError {
  constructor() {
    super('Unauthorized', 'UNAUTHORIZED', 401)
  }
}

// app/error.tsx — Global error boundary
'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div className="flex-center min-h-screen">
      <div className="text-center">
        <h2>Something went wrong</h2>
        <button onClick={reset}>Try again</button>
      </div>
    </div>
  )
}

Drizzle Migrations

// drizzle.config.ts
import type { Config } from 'drizzle-kit'

export default {
  schema: './lib/schema.ts',
  out: './drizzle/migrations',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
} satisfies Config

# Generate migration từ schema changes
npx drizzle-kit generate

# Apply migrations
npx drizzle-kit migrate

# Seed database
npx drizzle-kit studio  # Visual database browser

8. AI-Ready Architecture — Stack Này Sẵn Sàng cho RAG và AI Agents

pgvector + Vercel AI SDK: RAG Pipeline Đầy Đủ

// lib/rag.ts — Complete RAG pipeline
import { openai } from '@ai-sdk/openai'
import { embed, embedMany, generateText } from 'ai'
import { db } from './db'
import { documents } from './schema'
import { sql, and, eq } from 'drizzle-orm'

// 1. Ingest document — embed và store
export async function ingestDocument(
  content: string,
  metadata: Record<string, unknown>,
  userId: string
) {
  const { embedding } = await embed({
    model: openai.embedding('text-embedding-3-small'),
    value: content,
  })

  await db.insert(documents).values({
    content,
    embedding,
    metadata,
    userId,
  })
}

// 2. Semantic search
export async function semanticSearch(
  query: string,
  userId: string,
  limit = 5
) {
  const { embedding: queryEmbedding } = await embed({
    model: openai.embedding('text-embedding-3-small'),
    value: query,
  })

  return db
    .select({
      content: documents.content,
      metadata: documents.metadata,
      similarity: sql<number>`1 - (${documents.embedding} <=> ${queryEmbedding}::vector)`,
    })
    .from(documents)
    .where(
      and(
        eq(documents.userId, userId),
        sql`1 - (${documents.embedding} <=> ${queryEmbedding}::vector) > 0.5`
      )
    )
    .orderBy(sql`${documents.embedding} <=> ${queryEmbedding}::vector`)
    .limit(limit)
}

// 3. RAG: Augment generation với retrieved context
export async function ragQuery(question: string, userId: string) {
  const relevantDocs = await semanticSearch(question, userId)

  const context = relevantDocs.map(d => d.content).join('\n\n---\n\n')

  const { text } = await generateText({
    model: openai('gpt-4o-mini'),
    system: `You are a helpful assistant. Answer based on the provided context only.
             If the answer isn't in the context, say "I don't have enough information."`,
    messages: [
      {
        role: 'user',
        content: `Context:\n${context}\n\nQuestion: ${question}`
      }
    ]
  })

  return { answer: text, sources: relevantDocs }
}

AI Agent Integration Pattern

// app/api/ai/agent/route.ts — Stateful AI Agent
import { openai } from '@ai-sdk/openai'
import { streamText, tool } from 'ai'
import { z } from 'zod'
import { db } from '@/lib/db'

export async function POST(req: Request) {
  const { messages, userId } = await req.json()

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      searchDocuments: tool({
        description: 'Search user documents using semantic similarity',
        parameters: z.object({
          query: z.string(),
        }),
        execute: async ({ query }) => {
          return semanticSearch(query, userId)
        },
      }),
      createTask: tool({
        description: 'Create a new task for the user',
        parameters: z.object({
          title: z.string(),
          description: z.string().optional(),
          dueDate: z.string().optional(),
        }),
        execute: async (input) => {
          const task = await db.insert(tasks).values({
            ...input,
            userId,
          }).returning()
          return task[0]
        },
      }),
      getAnalytics: tool({
        description: 'Get user activity analytics',
        parameters: z.object({
          period: z.enum(['7d', '30d', '90d']),
        }),
        execute: async ({ period }) => {
          const days = { '7d': 7, '30d': 30, '90d': 90 }[period]
          return db.select(/* ... analytics query */)
        },
      }),
    },
    maxSteps: 5,
  })

  return result.toDataStreamResponse()
}

Next.js + AI SDK Chat UI

// app/chat/page.tsx
'use client'

import { useChat } from 'ai/react'

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/ai/agent',
  })

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
      <div className="flex-1 overflow-y-auto space-y-4">
        {messages.map(message => (
          <div
            key={message.id}
            className={`p-3 rounded-lg ${
              message.role === 'user'
                ? 'bg-primary text-primary-foreground ml-8'
                : 'bg-muted mr-8'
            }`}
          >
            {message.content}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="mt-4 flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Hỏi AI assistant của bạn..."
          className="flex-1 px-4 py-2 border rounded-lg"
        />
        <button
          type="submit"
          disabled={isLoading}
          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg"
        >
          Send
        </button>
      </form>
    </div>
  )
}

9. Performance Checklist — Trước Khi Ship Production

// next.config.ts — Production optimizations
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  // Image optimization
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.yourdomain.com' },
    ],
  },

  // Bundle analyzer (dev only)
  ...(process.env.ANALYZE === 'true' && {
    webpack: (config) => {
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
      config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }))
      return config
    }
  }),

  // Headers
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        ],
      },
    ]
  },
}

export default nextConfig

Checklist trước go-live:

• NEXT_TELEMETRY_DISABLED=1 trong production env
• Database connection pooling configured (PgBouncer hoặc Neon pooler)
• Images served từ CDN, không phải /public
• console.log removed (dùng proper logger như Pino)
• Error monitoring setup (Sentry free tier)
• Rate limiting trên API routes (upstash/ratelimit)
• Webhook signature validation (Stripe, etc.)
• CSP headers configured
• Database indexes trên foreign keys và frequently queried columns

Kết Luận: Tại Sao Stack Này Vẫn Thắng Trong 2026

Không có stack hoàn hảo. Nhưng có stack đủ tốt cho phần lớn use cases, với ecosystem lớn nhất, talent pool dễ hire nhất, và documentation tốt nhất.

Next.js + TypeScript + PostgreSQL đáp ứng cả ba tiêu chí đó — và với sự bổ sung của pgvector, Vercel AI SDK, và Drizzle, nó còn trở thành AI-native stack mà không cần thêm bất kỳ external service nào.

Trong bối cảnh startup cần move fast:

• Next.js 15 loại bỏ ranh giới frontend/backend
• TypeScript biến codebase thành documentation tự động
• PostgreSQL + pgvector là database duy nhất bạn cần cho cả OLTP lẫn AI workloads
• Drizzle giữ type safety từ database ra đến UI
• shadcn/ui ship production UI trong giờ, không phải ngày

Đây không phải là stack của năm 2020 hay 2022. Đây là stack của 2026 và những năm tiếp theo — được thiết kế cho AI-first, edge-first, developer-experience-first world.

Muốn ship MVP với stack này trong 7 ngày? Xem dịch vụ MVP của Autonow hoặc đọc thêm chi phí thực tế khi build MVP.