在 Next.js 中使用路由器設置動態內容
如何在 Next.js 網站中設置動態內容？ 在使用 Link 在 Next.js 中連接兩個頁面文章中，我們看到了如何將主頁連接到博客頁面。 博客是 Next.js 的一個很好的用例，我們將在本章中繼續探索，並添加博客文章。 博客文章有動態的 URL，例如標題為“Hello World”的文章可能具有 URL /blog/hello-world，標題為“我的第二篇文章”的文章可能具有 URL /blog/my-second-post。 這些內容是動態的，可能來自數據庫、markdown 文件或其他來源。 Next.js 可以根據動態 URL 提供動態內容。 我們可以通過使用 [] 語法創建動態 URL。 如何做到這一點呢？我們添加一個 pages/blog/[id].js 文件。此文件將處理所有 /blog/ 路由下的動態 URL，例如上面提到的 /blog/hello-world、/blog/my-second-post 等。 在文件名中，方括號中的[id]表示任何動態的內容將放在路由器的查詢屬性的id參數中。 好的，一次介紹了這麼多東西。 什麼是路由器（router）？ 路由器是 Next.js 提供的一個庫。 我們從 next/router 導入它： import { useRouter } from "next/router"; 一旦我們有了 useRouter，我們可以使用以下代碼來實例化路由器對象： const router = useRouter(); 一旦我們有了這個路由器對象，我們可以從中提取信息。 特別是我們可以通過訪問 [id].js 文件中的 router.query.id 來獲取 URL 的動態部分。 讓我們繼續實踐這些事情。 創建文件 pages/blog/[id].js： import { useRouter } from "next/router"; export default () => { const router = useRouter(); return ( <> <h1>博客文章</h1> <p>文章 ID: {router....