頁面跳轉

Next.js中的頁面

在 Next.js 中，頁面是從 pages資料夾中的文件導出的 React 組件。

頁面根據其 文件名 來做路由。例如，在開發中：

• pages/index.js 是對應 / 來做路由.
• pages/posts/first-post.js 是對應 /posts/first-post  來做路由.

我們已經有了 pages/index.js 檔案，所以讓我們創建 pages/posts/first-post.js 來看看它是如何工作的。

創建一個新新頁面

Create the posts directory under pages. 在pages資料夾下創建一個posts的資料夾

在posts資料夾底下創建一個叫first-post.js的檔案包含以下程式碼:

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

這個組件可以取任何名字, 但您必須將其export為default。 現在，確保開發伺服器正在運行並訪問 http://localhost:3000/posts/first-post. 你應該會看到頁面:

這就是在Next.js中創建不同頁面的方法.

只需在pages目錄下創建一個JS文件，文件的路徑就變成了URL路徑。

在某種程度上，這類似於使用 HTML 或 PHP 文件構建網站。您無需編寫 HTML，而是編寫 JSX 並使用 React 組件。

讓我們添加一個指向新頁面的連結，以便我們可以從主頁跳轉到它。

← 返回上一頁 前往下一頁 →