改 Next.js 網站的導覽列時，連結能打開就算完成了嗎？假如訪客剛輸入搜尋字詞，點進模板列表後整頁重新載入，字詞又變空白，操作就被打斷了。站內路由通常先用 next/link；外部網站、下載或刻意完整載入的入口，再用一般 a。
先確認你改的是 Next.js 路由
這個寫法適用於 Next.js 專案，以下採 App Router，首頁是 app/page.js，模板列表是 app/products/page.js。在 WordPress 或 MacCMS 的模板裡貼上 JSX，並不會因此得到 Next.js 換頁功能。先看專案的 package.json 和 app 目錄，別把網站類型混在一起。
導覽元件可直接寫：
import Link from 'next/link';
export default function Navigation() {
return <Link href="/products">看模板</Link>;
}/products 必須對應實際存在的路由。不要再往 Link 裡包一層 a，也不用自己攔截點擊、呼叫 location.href；後者可能讓你又回到完整載入。
用同一個搜尋欄比較兩種換頁
把搜尋欄放在首頁與列表共用的 layout 裡，以 useState 管理輸入值；含這個狀態的元件要有 'use client'。準備兩個都指向 /products 的連結，一個是 Link，一個是普通 <a href="/products">，都在原分頁開啟。
先填「部落格模板」，點 Link。這個範例進入列表後，搜尋字詞仍在；回首頁，再點普通 a，欄位變回空白。原因是 Link 的客戶端換頁保留了共用 layout，普通 a 則建立新的 document。這不是所有欄位都會保留：若搜尋欄放在被替換的 page 內，或元件被重新建立，狀態仍可能消失。
哪些入口保留一般 a？
跳到外部 Demo、寄信連結、下載檔案，用一般 a 已很清楚。新分頁也會建立另一個頁面，不能期待它接續目前的輸入狀態。範例中的 Link 刻意不加 target="_blank"，是為了測原分頁換頁；文章裡供你閱讀的參考連結則另開分頁。
如果訪客重整後仍要找回搜尋條件，把它放進網址查詢參數，例如 /products?q=blog，並讓列表讀取該參數。共用 layout 的暫存狀態不是資料保存方案，也不等於已經完成搜尋功能。
改完，檢查換頁與返回
只先改一個導覽入口，測點擊、上一頁、直接貼上網址，以及新分頁開啟。開 DevTools 的 Network，留意點 Link 時是否新增整頁的 Document 請求；不要只憑畫面閃不閃來判斷。載入狀態異常時，可對照本站的304 與快取排查方法，分清換頁方式和資源快取。
開發模式與正式建置的行為不完全相同；預先載入主要在正式模式啟用，還受路由與設定影響。換成 Link 不代表速度或排名必然提升。若改動造成錯誤，還原該導覽元件的前一版，先保住原入口，再檢查路由與程式錯誤。
評論0