頁面路由：Next.js 中的頁面 | Next.js

在 Next.js 中，頁面是指從 pages 目錄中的檔案匯出的 React 元件。

頁面會根據其檔案名稱與路由建立關聯。舉例來說，在開發環境中：

我們已經有 pages/index.js 檔案，現在讓我們建立 pages/posts/first-post.js 來看看它是如何運作的。

在 pages 目錄下建立 posts 子目錄。

在 posts 目錄中建立一個名為 first-post.js 的檔案，內容如下：

export default function FirstPost() {
  return <h1>First Post</h1>;
}

元件可以任意命名，但必須將其作為 default 匯出。

現在，請確保開發伺服器正在運行，並訪問 http://localhost:3000/posts/first-post。您應該會看到以下頁面：

這就是您在 Next.js 中建立不同頁面的方式。

只需在 pages 目錄下建立一個 JS 檔案，該檔案的路徑就會成為 URL 路徑。

從某種角度來看，這與使用 HTML 或 PHP 檔案建立網站類似。不同之處在於您不是編寫 HTML，而是編寫 JSX 並使用 React 元件。

讓我們為新添加的頁面加入一個連結，以便我們可以從首頁導航到該頁面。

Next.js 中的頁面