Next.js App Router sau 1 năm production: những điều không ai nói với bạn

Đây là bài viết demo với nội dung placeholder. Khi kết nối với backend thực (Phase 2), nội dung sẽ được render từ Plate.js JSON thông qua @blog/editor/renderer.

Bối cảnh và vấn đề

Sau 2 năm tích lũy tech debt không được xử lý, codebase NestJS của chúng tôi đã trở thành một mớ hỗn độn. Circular dependencies xuất hiện ở khắp nơi, business logic nằm rải rác trong controllers, và không có một integration test nào đáng tin cậy.

Điểm trigger là khi một junior dev thêm một feature đơn giản mất 3 ngày vì không hiểu được flow của data qua các module. Đó là lúc chúng tôi quyết định phải làm gì đó.

Phân tích codebase cũ

Sau khi audit codebase, chúng tôi phát hiện 3 vấn đề chính: circular dependencies giữa các module, business logic nằm rải rác trong controllers, và không có integration tests.

// Trước refactor — circular dep rất phổ biến
@Injectable()
export class PostService {
  constructor(
    private readonly userService: UserService, // circular!
    private readonly categoryService: CategoryService,
  ) {}
}

Kế hoạch refactor

Chúng tôi chọn Strangler Fig pattern — không rewrite từ đầu mà dần dần thay thế từng phần, đảm bảo production vẫn chạy liên tục trong suốt quá trình.

"The best refactoring is the one that ships without users noticing." — Team motto

Nội dung đầy đủ sẽ có khi Phase 2 hoàn thành và kết nối BE thực. Hiện tại đây là placeholder content để test layout và typography của trang detail.

Kết quả

• ✅ Build time giảm 40%
• ✅ Onboarding time cho dev mới giảm từ 2 tuần xuống 3 ngày
• ✅ Test coverage tăng từ 12% lên 74%
• ✅ Zero downtime trong toàn bộ quá trình