Next.js 13 教學 – Routing

在本篇教學中，我們將學習如何在 Next.js 13 中進行路由設定。我們將涵蓋頁面路由、佈局設定、元數據設置、字型引入、加載效果、錯誤頁面處理以及 usePathname 鉤子的使用。讓我們一起來看看吧！

頁面路由

在 Next.js 中，可以輕鬆地設定路由。我們只需在 pages 目錄中創建一個新的檔案，並將其命名為對應的路徑即可。例如，創建一個名為 /about 的檔案，即可在瀏覽器中訪問 /about 頁面。

佈局設定

在 Next.js 中，我們可以創建一個共用的佈局組件，並在各個頁面中引入這個組件以實現統一的外觀和功能。這樣可以讓我們輕鬆地管理整個應用的外觀和風格。

元數據設置

通過在頁面組件中使用 Next.js 提供的 Head 元件，我們可以輕鬆地設置每個頁面的標題、描述和其他元數據。這有助於提升應用的 SEO 性能和用戶體驗。

字型引入

Next.js 提供了內置的字型引入功能，我們可以通過配置文件輕鬆地引入自定義的字型。這樣可以使應用的字體風格更加獨特和個性化。

加載效果

通過配置 Next.js 的全局加載效果，我們可以在應用的每個頁面都添加一個統一的加載動畫，提升用戶體驗。

錯誤頁面處理

在 Next.js 中，我們可以輕鬆地設置自定義的錯誤頁面，用於處理各種錯誤情況，例如 404 錯誤等。這樣可以使應用在出錯時能夠提供更好的提示和導航。

usePathname 鉤子

在 Next.js 13 中，引入了 usePathname 鉤子，用於獲取當前頁面的路徑信息。這樣可以在組件內部輕鬆地根據路徑信息做出不同的處理和顯示。