Next.js 16.3 版本發布，新增即時導覽和開發效率升級

Next.js 16.3 版本發布，新增即時導覽和開發效率升級

Next.js 是一個流行的網頁應用程式開發框架，最近發布了 16.3 版本。這個新版本加入了即時導覽（Instant Navigations）工具組，讓開發人員可以在開發期間標出未能即時顯示內容的頁面切換，並以 Playwright 測試指定切換後應立即出現的內容，防止程式重構使導覽不再即時。

即時導覽的工作原理

Next.js 的即時導覽功能是透過預先準備載入畫面、控制頁面內容的預先載入範圍，以及檢查切換速度的開發工具來實現的。這個功能可以減少使用者點選連結後等待內容出現的情況。Next.js 可以將部分網頁內容留在 伺服器 處理，減少 瀏覽器 需要下載及執行的程式碼，但頁面切換時也可能必須等待伺服器回傳資料，操作感受不如由瀏覽器端驅動的單頁式應用程式（SPA）即時。

新功能的優點

新功能會先把可重複使用的載入畫面送到瀏覽器，使用者點選連結後可立即看到畫面，再逐步載入動態內容。其中，部分預先載入功能（Partial Prefetching）允許網站只先載入下一頁必要的畫面，不必預先下載完整頁面。未在網站建置時預先產生的網址，第一次有人造訪時也能先顯示載入畫面，系統再於背景完成頁面產生，後續造訪者便可直接取得已完成的頁面內容。

開發工具的升級

新版開發工具會標出開發期間遇到的非即時頁面切換，並讓開發人員暫停導覽流程，查看使用者等待期間會看到的載入畫面。Next.js 也提供 Playwright 測試輔助函式，可設定頁面切換後應立即出現的內容，讓程式調整或重整架構後若使導覽不再即時，能在測試階段發現。

未來展望

即時導覽目前仍須由開發人員自行開啟 元件快取（Cache Components）與部分預先載入功能。Next.js 團隊表示，相關行為預計在未來主要版本成為預設，並採用較明確的快取規則，減少過去隱含快取與過度預先載入造成的複雜度。Next.js 16.3 也改善既有專案的開發與執行效率，官方測試顯示，Turbopack 開發伺服器在部分情境下最多可減少 90% 記憶體用量，重複建置時可沿用未變更的建置結果，而伺服器產生網頁畫面的機制改用 Node.js 原生資料串流後，負載測試最多可多處理 22% 請求。新版也可使用 TypeScript 7 進行程式型別檢查。