Tóm tắt nhanh:
ak-web-frameworkslà skill kiến thức cho Next.js (App Router, Server Components, SSR, ISR, cache) và Turborepo (monorepo, pipeline, cache build). Nó đọc cấu hình dự án trước rồi chỉ mở phần hướng dẫn đúng với việc: render và dữ liệu, tối ưu, SEO/GEO, hay cấu trúc monorepo. Nó giữ framework và bộ icon bạn đang có, RemixIcon chỉ là lựa chọn thêm.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi bạn dựng app Next.js mới, chuyển trang nặng JS client sang Server Components, chỉnh cache khi dữ liệu cũ hoặc gọi API quá nhiều, chuyển monorepo sang Turborepo, hoặc thêm SEO/GEO cho site công khai. Muốn đổi stack hay bộ icon thì phải nói rõ: mặc định nó giữ thứ đang có.
flowchart LR
A["Việc Next.js hoặc Turborepo"] --> B["ak-web-frameworks"]
B --> C["Đọc manifest, cấu hình"]
C --> D["Code theo đúng phần hướng dẫn"]
D --> E["Kiểm bằng build, curl, trình duyệt"]Nó dựa trên 4 ý:
| Ý | Câu hỏi | Ví dụ |
|---|---|---|
| Stack có sẵn | Dự án dùng framework, workspace và bộ icon nào? | Thấy turbo.json và apps/web thì việc build đi theo phần Turborepo |
| Server hay client | Component này cần chạy trên trình duyệt không? | Trang danh sách lấy dữ liệu ở server, chỉ nút "Thích" có state mới dùng 'use client' |
| Dữ liệu cũ được bao lâu | Lấy dữ liệu mới mỗi lần, theo chu kỳ, hay khi có thay đổi? | Blog dùng revalidate: 3600, giỏ hàng dùng no-store, đăng bài xong gọi revalidatePath('/posts') |
| Một nguồn nội dung cho SEO/GEO | Sitemap, llms.txt, bản .md lấy dữ liệu từ đâu? | Một hàm getPages() cấp dữ liệu cho cả trang HTML, sitemap.xml, llms.txt và bản .md |
Với monorepo, skill tách rõ apps/ và packages/, khai ^build để gói phụ thuộc build trước, khai đúng outputs để cache trúng, và bật remote cache khi làm theo nhóm.
Prompt mẫu để dựng app mới:
/ak-web-frameworks nextjs Dựng app <tên app> bằng Next.js App Router, TypeScript.
Kết quả: chạy npm run dev được, có layout gốc, trang chủ, loading và error.
Ràng buộc: một app duy nhất, chưa cần monorepo, chưa chọn bộ icon.
Xong khi: npm run build pass.Skill này không có cờ. Sau tên lệnh bạn ghi framework (như nextjs hoặc turborepo) rồi tới việc cần làm. Dù bạn ghi gì, skill vẫn đọc cấu hình dự án để biết stack thật.
Phần dưới đây là bản chi tiết: luồng chạy, 5 tình huống kèm prompt, cách ghi đầu vào, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-web-frameworks: làm Next.js và Turborepo theo đúng stack đang có" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-web-frameworks". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-web-frameworks
