Web Frameworks
Xây dựng ứng dụng web hiện đại với Next.js App Router và quản lý monorepo Turborepo.
Kỹ Năng Này Làm Gì
Skill ckm:web-frameworks cung cấp hướng dẫn chuyên sâu cho Next.js App Router (RSC, Server Actions, routing) và Turborepo monorepo (workspace management, build pipelines, shared packages). Tập trung vào patterns được khuyến nghị cho production.
Bắt Đầu Nhanh
/ckm:web-frameworksHoặc chỉ định framework:
/ckm:web-frameworks Setup Next.js App Router với authentication, database và deploymentNext.js App Router
Cấu Trúc Thư Mục
app/
├── (auth)/
│ ├── login/page.tsx
│ └── signup/page.tsx
├── dashboard/
│ ├── layout.tsx # Shared layout
│ └── page.tsx # Server Component
├── api/
│ └── webhook/route.ts
├── layout.tsx # Root layout
└── page.tsx # HomeServer vs Client Components
// Server Component (mặc định) — không cần 'use client'
async function ProductList() {
const products = await db.product.findMany(); // Direct DB access
return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}
// Client Component — cần 'use client'
'use client';
function SearchBar() {
const [query, setQuery] = useState('');
return <input value={query} onChange={e => setQuery(e.target.value)} />;
}Server Actions
// actions/product.ts
'use server';
export async function createProduct(formData: FormData) {
const name = formData.get('name') as string;
await db.product.create({ data: { name } });
revalidatePath('/products');
}Turborepo Monorepo
npx create-turbo@latest my-monorepoapps/
├── web/ # Next.js app
└── docs/ # Astro docs
packages/
├── ui/ # Shared components
├── database/ # Prisma schema + client
└── config/ # Shared configs (ESLint, TS)Ví Dụ Sử Dụng
Setup project:
/ckm:web-frameworks Setup Next.js App Router với Prisma, NextAuth và shadcn/uiMonorepo:
/ckm:web-frameworks Tạo Turborepo với apps: web, admin, api và shared UI packagePerformance:
/ckm:web-frameworks Tối ưu Next.js app — bundle size, image optimization, ISR strategy