Satus: Next.js starter kit đáng dùng nhất cho content-driven sites

Mình đã xem qua khá nhiều Next.js starter template trên GitHub - từ mấy cái cơ bản chỉ có create-next-app với vài config thêm, đến những cái phức tạp đến mức bạn mất cả buổi chiều chỉ để hiểu structure. Satus của Darkroom Engineering thì khác hẳn. Cái repo này có 950+ stars và khi mình đào vào xem, thấy rõ tại sao.

Darkroom Engineering là studio chuyên làm web cho các thương hiệu lớn - họ không làm template cho vui, cái này là production setup mà họ đang dùng thật. Điều đó thể hiện rõ qua từng quyết định trong codebase.

Tech stack - không có gì thừa, không thiếu gì cần

Trước khi đi vào chi tiết, nhìn qua stack một cái:

Cái hay ở đây là họ không nhồi hết mọi thứ vào và bắt bạn tự gỡ ra. Thay vào đó, có một interactive setup script - bạn chạy bun run setup:project, nó hỏi bạn cần integration nào, rồi scaffold đúng những thứ đó thôi. Theo kinh nghiệm của mình, đây là cách tiếp cận đúng đắn nhất cho một starter kit - đừng bắt dev phải xóa code, hãy để họ chọn từ đầu.

Project structure - mental model rõ ràng đến bất ngờ

Một trong những thứ mình thích nhất là cái mental model mà họ document rõ ràng:

1app/          # Next.js pages và routes
2components/   # UI components
3lib/          # Everything non-UI
4  ├── hooks/        # Custom React hooks
5  ├── integrations/ # Third-party services
6  ├── styles/       # CSS & Tailwind
7  ├── webgl/        # 3D graphics (optional)
8  └── dev/          # Debug tools (optional)

Rule đơn giản: UI thì vào components/, còn lại vào lib/. Nghe có vẻ hiển nhiên nhưng bạn sẽ ngạc nhiên khi thấy bao nhiêu project lớn không có rule này, rồi sau 6 tháng không ai biết cái hook nào đang nằm ở đâu.

Mình thấy cái này hay ở chỗ: khi onboard một dev mới vào project, bạn chỉ cần giải thích cái mental model này là xong. Không cần tour dài dòng.

Documentation - hiếm có starter nào làm tốt đến vậy

Đây mới là phần làm mình thực sự impressed. Hầu hết starter kit có một cái README rồi thôi. Satus có cả một hệ thống documentation:

Cái AGENTS.md và CLAUDE.md là detail mà mình thấy rất forward-thinking. Họ đang nghĩ đến việc AI coding assistants sẽ làm việc với codebase này như thế nào, và document rules để AI không generate code sai pattern. Năm 2025 mà không nghĩ đến chuyện này thì hơi chậm rồi.

Cái PROD-README.md cũng thú vị - họ có hẳn một command để handoff cho client: strip branding, swap README, generate component inventory. Ai đã từng làm agency work sẽ biết cái này tiết kiệm bao nhiêu thời gian.

Tooling choices - Bun + Biome thay vì npm + ESLint

Họ chọn Bun thay vì npm/yarn/pnpm, và Biome thay vì ESLint + Prettier. Đây là những lựa chọn opinionated, và mình thấy hợp lý:

Bun - install nhanh hơn npm đáng kể, runtime có thể dùng thay Node trong một số trường hợp. Với một starter template, tốc độ bun install lần đầu tạo ấn tượng tốt ngay.

Biome - thay thế cả ESLint lẫn Prettier trong một tool, config đơn giản hơn nhiều, và nhanh hơn khoảng 10-20x so với ESLint thuần. Cái biome.json trong repo cũng không quá phức tạp - đủ strict nhưng không annoying.

Turbopack - dev server nhanh hơn Webpack-based setup rõ rệt, đặc biệt với large project. Đây là default trong Next.js 16 rồi nên không phải điểm đặc biệt, nhưng tốt khi họ không disable nó.

Anh em lưu ý: nếu team đang dùng npm workspaces hay có tooling gắn chặt với npm/yarn, việc switch sang Bun có thể cần một chút migration effort. Không phải deal-breaker nhưng nên tính trước.

WebGL optional - cách handle dependencies thông minh

Cái feature mình thấy elegant nhất là cách họ handle WebGL. React Three Fiber và GSAP là heavy dependencies - nếu bạn làm một content site đơn giản, bạn không muốn ship cả bundle đó.

Thay vì để dev tự tay xóa, setup script hỏi bạn có cần WebGL không. Nếu không, nó không scaffold lib/webgl/ và không thêm dependencies. Clean và simple.

Nếu sau này project cần thêm WebGL, thì sao? Họ có document pattern rõ ràng trong ARCHITECTURE.md để bạn add vào sau. Đây là cách design starter kit đúng nghĩa - không assume bạn cần mọi thứ.

Integrations - Sanity, Shopify, HubSpot

Ba integration này cover được phần lớn use case của content-driven sites:

• Sanity - CMS phổ biến nhất cho headless setup, đặc biệt với Next.js
• Shopify - e-commerce, dùng Storefront API
• HubSpot - form và marketing automation

Mình chưa có cơ hội test sâu từng integration, nhưng nhìn vào lib/integrations/ thì structure khá clean - mỗi integration có folder riêng, không cross-contaminate nhau. Điều này quan trọng khi project scale up và bạn cần swap hoặc add integration mới.

Ai nên dùng Satus?

Satus phù hợp nhất với:

• Agency và studio làm web cho clients - có sẵn client handoff workflow, documentation đầy đủ
• Dev làm content-driven sites - landing page, marketing site, blog, e-commerce
• Team muốn modern stack - App Router, React 19, Tailwind v4 ngay từ đầu mà không phải tự setup
• Project cần WebGL/3D - có sẵn R3F setup, không phải tích hợp từ đầu

Ngược lại, có thể không phù hợp nếu:

Điểm trừ thực tế

Mình cố tình không chỉ nói điểm tốt. Một vài thứ cần lưu ý:

Thứ nhất, opinionated khá mạnh. Bun, Biome, Turbopack - nếu team bạn có preference khác, bạn sẽ phải spend time để đổi. Không phải vấn đề lớn nhưng không phải zero effort.

Thứ hai, Tailwind v4 vẫn còn khá mới. API thay đổi so với v3 khá nhiều - @apply behavior khác, config syntax khác. Nếu team chưa quen v4, có learning curve nhất định. Mình đã bị trip up vài lần khi copy snippet từ v3 docs vào v4 project.

Thứ ba, Next.js 16 + React 19 - bleeding edge. Ecosystem chưa hoàn toàn bắt kịp, một số third-party packages vẫn chưa fully compatible với React 19. Nếu bạn cần dùng nhiều libraries cụ thể, nên check compatibility trước.

Quick start thực tế

Nếu bạn muốn thử ngay:

1# Clone template
2ghx darkroomengineering/satus my-project
3cd my-project
4
5# Install dependencies
6bun install
7
8# Interactive setup - chọn integrations bạn cần
9bun run setup:project
10
11# Copy env file
12cp .env.example .env.local
13
14# Start dev server
15bun dev

Cái bun run setup:project là bước quan trọng nhất - đừng skip nó và dev thẳng, vì bạn sẽ phải manually cleanup sau.

Nhìn tổng thể, Satus là một trong những Next.js starter kit được làm nghiêm túc nhất mình từng review. Không phải vì nó có nhiều feature nhất, mà vì mỗi quyết định trong đó đều có lý do rõ ràng - từ structure, tooling, đến documentation. Darkroom Engineering đã distill nhiều năm làm production web vào một template, và điều đó thể hiện rõ.

Nếu bạn đang bắt đầu một content site mới với Next.js và muốn có foundation vững chắc ngay từ đầu, đây là cái đáng để fork về và customize hơn là tự build từ đầu.