到目前為止，我們建立的 Next.js 應用程式只有一個頁面。 網站和 Web 應用程式通常有許多不同的頁面。
讓我們探索如何向我們的應用程式添加更多頁面。
您將在這篇教學裡學到
在本課程中，您將：
Link 元件在頁面之間啟用客戶端導航。註：如果您正在尋找有關 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 來看看它是如何工作的。在 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 元件。
讓我們添加一個指向新添加頁面的連接，以便我們可以從主頁導航到它。
在網站上的頁面之間連接時，您使用 <a> HTML 標記。
在 Next.js 中，您使用來自 next/link 的 Link 元件來包裝 <a> 標記。 <Link> 允許您對應用程式中的不同頁面進行客戶端導航。
首先，打開 pages/index.js，並通過在頂部添加以下行從 next/link 匯入 Link 元件：
import Link from 'next/link';然後找到如下所示的 h1 標籤：
<h1 className="title">
Learn <a href="https://nextjs.org">Next.js!</a>
</h1>並將其更改為：
<h1 className="title">
Read{' '}
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
</h1>{' '} 添加一個空格，用於將文本分成多行。
接下來，打開 pages/posts/first-post.js 並將其內容替換為以下內容：
import Link from 'next/link';
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
);
}如您所見，Link 元件類似於使用 <a> 標籤，但是您使用 <Link href="..."> 並在其中放置一個 <a> 標籤，而不是 <a href="...">。
讓我們看看它是否有效。 您現在應該在每個頁面上都有一個連接，允許您來回切換：
Link 元件支援在同一個 Next.js 應用程式中的兩個頁面之間進行客戶端導航。
客戶端導航意味著使用 JavaScript 進行頁面轉換，這比瀏覽器完成的預設導航要快。
這裡有一個簡單的方法可以驗證它：
<html> 的 background CSS 屬性更改為 yellow。這表明瀏覽器沒有加載整個頁面而是客戶端導航正在工作。
如果您使用 <a href="..."> 而不是 <Link href="..."> 並執行此操作，則在連接點擊時背景顏色將被清除，因為瀏覽器會進行完全刷新。
Next.js 會自動進行程式碼拆分，因此每個頁面只加載該頁面所需的內容。 這意味著在呈現主頁時，最初不會提供其他頁面的程式碼。
即使您有數百個頁面，這也可以確保主頁快速加載。
僅加載您請求的頁面的程式碼也意味著頁面變得孤立。 如果某個頁面拋出錯誤，應用程式的其餘部分仍然可以工作。
此外，在 Next.js 的生產版本中，每當連接元件出現在瀏覽器的視口中時，Next.js 都會自動在後台預取連接頁面的程式碼。 當您單擊連接時，目標頁面的程式碼已經在後台加載，頁面轉換幾乎是即時的！
Next.js 通過程式碼拆分、客戶端導航和預取（在生產環境中）自動優化您的應用程式以獲得最佳性能。
不需要路由庫的情況下，您透過建立 pages 下的文件並使用內建的 Link 元件實現了路由。
您可以在路由文件，以及路由的 API 參考中關於 next/link 的部分了解有關 Link 元件的更多資訊。
註：如果您需要連接到 Next.js 應用程式之外的外部頁面，只需使用不帶 Link 的 <a> 標記。
如果您需要添加屬性，例如 className，請將其添加到 a 標記，而不是 Link 標記。 這裡有一個範例。
© Copyrights 從想像到創造. All Rights Reserved.
