JavaScript框架Next.js 13.5提升本地開發效能與路由效率

建立在React之上的知名JavaScript框架Next.js釋出了最新的13.5版本，這個版本主要改進開發體驗和效能。Next.js 13.5在本地開發效能和穩定性都有所提升，本地伺服器啟動速度與熱模組替換速度皆明顯提升。此外，這個版本還減少記憶體使用量，同時加快熱門套件匯入速度。

Next.js 13新加入App Router，官方在Next.js 13.4針對該功能更新，以提升應用程式的效能和可靠性，並於Next.js 13.5再次改進App Router。App Router是利用React新功能React Server Components（RSC），所發展的建置應用程式新範式，簡單來說，該功能是基於Next.js原本檔案系統Pages Router的延伸，可讓開發者在不重新載入整個頁面的情況下，切換到不同視圖或是部分，其提供了一個更高效的方法來組織和處理路由。

官方把更新重點擺在App Router上，並進行了許多最佳化，像是Next.js現在可以更好地處理資料儲存，透過快取和最小化速度慢的工作，減少不必要的操作，同時最佳化耗時的檔案系統操作。Next.js也會在編譯過程增量走訪樹結構，也就是在更新和處理資料結構時，系統不會重新走訪整棵樹，而是針對有變動的部分進行處理，以大幅提高效率和速度。

Next.js 13.5還會推延非必要的阻塞式同步呼叫，並且自動配置大型圖示資源庫。相較Next.js 13.4，新版本的本機伺服器啟動速度提高22％，熱模組替換快速刷新的速度提高29％，記憶體使用減少40％。App Router是目前官方推薦的應用程式建置方法，建議新專案和應用程式採用，而對於舊的應用程式，則也建議逐步整合App Router。目前兩種路由方式可以在同一應用程式中共存。

Next.js 13.5還最佳化套件匯入效能，當在使用大型圖示或是元件函式庫時，可以提高本地開發效率和加速生產環境的冷啟動。過去開發者需要手動設定匯入函式庫模組，而現在Next.js會自動處理這項工作，而許多知名的函式庫，像是@mui/icons-material和lodash現在也只會載入真正會用到的模組。

官方參考社群的意見，新增一個實驗性函式unstable_getImgProps()，這個函式允許開發者不使用<Image>元件，以更靈活的方式處理和顯示圖片。