Tối ưu code next js khi chạy trên môi trường dev

 Cách cải thiện trải nghiệm phát triển

Next.js là một framework full-stack nên làm rất nhiều việc đằng sau, có thể áp dụng vài mẹo sau để cải thiện tốc độ

1. Dùng Turbopack với next dev --turbo

Vercel đang phát triển Turbopack — trình thay thế Webpack viết bằng Rust nó cho thời gian refresh nhanh hơn

Thay script trong package.json như sau:

"scripts": {

    "dev": "next dev --turbopack",

  }

2. Giữ page và component nhỏ gọn

File lớn thời gian biên dịch lớn, tách nhỏ component và page sẽ giúp giảm phạm vi bị ảnh hưởng khi biên dịch lại.

3. Lazy-load các route hoặc component nặng

Không import các component nặng một cách tĩnh. Dùng dynamic() để tải khi cần:

import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'))