客戶端的跳轉 | Next.js 繁體中文官方教學

頁面跳轉

Link 元件可以允許在同一個 Next.js 應用程式中的兩個頁面之間進行客戶端的頁面跳轉 客戶端導航意味著頁面轉換時使用 JavaScript，這比瀏覽器內建的預設跳轉方法更快。

這裡有一個簡單的方法可以驗證它：

這表明瀏覽器沒有載入整個頁面並且用戶端跳轉正常運作。 This shows that the browser does not load the full page and client-side navigation is working.

如果您使用了 <a href="..."> 而不是 <Link href="...">，則在點擊連結時背景顏色將被清除，因為瀏覽器會進行完全重新整理。

Next.js 會自動進行程式碼拆分，所以每個頁面只載入該頁面所需的內容。這意味著在渲染首頁時，初始化的過程不會載入其他頁面的程式碼。

即使您有數百個頁面，這也可以確保首頁快速加載。

僅載入您請求的頁面也意味著頁面是獨立的程式碼。如果某個頁面拋出錯誤，應用程式的其餘部分仍然可以正常運作

此外，在 Next.js 的生產版本中，每當 Link 元件出現在瀏覽器的顯示裝置中時，Next.js 都會在後台自動提前載入連結頁面的程式碼。當您單擊連結時，目標頁面的代碼已經在背景執行加載，所以頁面轉換幾乎是即時的！

Next.js 會通過程式碼拆分、客戶端頁面跳轉和提前載入的機制來自動優化您的應用程式以取得最佳效能。

您可以在 pages 下將路由創建為檔案，並使用內建的 Link 組件，這個模式是不需要路由相關函式庫的。

您可以從API參考文件了解更多關於 Link 組件的相關知識

Note: 如果您需要鏈接到 Next.js 應用之外的 外部連結 頁面，只需使用不帶 Link 的 <a> 標籤

如果您需要添加屬性，例如，className，請將其添加到a 標籤，_而非_添加到Link 標籤。這是一個範例.

小試身手：

如果有個使用者打開他的瀏覽器並跳轉到 your-blog.com/posts/first-post 頁面，JavaScript 在初始化時會載入什麼進這個頁面？

僅加載 `/posts/first-post` 的 JavaScript加載整個應用程式的 JavaScript

本篇文章由

iga00257