使用鏈接在Next.js中鏈接兩個頁面

如何在Next.js中鏈接兩個或多個頁面

本教程從第一個Next.js教程離開。我們用一個頁面構建了一個站點：

我想在此網站上添加第二頁，即博客文章列表。它會被送入/blog，目前它只包含一個簡單的靜態頁面，就像我們的第一個頁面一樣index.js成分：

保存新文件後，npm run dev已經運行的進程已經能夠呈現頁面，而無需重新啟動它。

當我們點擊URL時http：// localhost：3000 / blog我們有了新頁面：

這是終端告訴我們的內容：

現在，URL是/blog取決於文件名及其在文件名下的位置pages文件夾。

您可以創建一個pages/hey/ho頁面，該頁面將顯示在URL上http：// localhost：3000 / hey / ho。

對於URL而言，無所謂的是文件內的組件名稱。

嘗試瀏覽頁面的源代碼，當從服務器加載頁面時，它將列出/_next/static/development/pages/blog.js作為加載的捆綁包之一，而不是/_next/static/development/pages/index.js就像在主頁上一樣。這是因為藉助自動代碼拆分，我們不需要用於主頁的捆綁軟件。只是用於博客頁面的捆綁軟件。

我們也可以從blog.js：

export default () => (
  <div>
    <h1>Blog</h1>
  </div>
)

或者，如果您更喜歡非箭頭函數語法：

export default function() {
  return (
    <div>
      <h1>Blog</h1>
    </div>
  )
}

現在我們有2頁，由index.js和blog.js，我們可以介紹鏈接。

頁面內的常規HTML鏈接是使用a標籤：

<a href="/blog">Blog</a>

我們無法在Next.js中做到這一點。

為什麼？我們在技術上能夠當然，因為這是Web和在網絡上，事物永不中斷（這就是為什麼我們仍然可以使用<marquee>標籤。但是使用Next的主要好處之一是，一旦加載了頁面，由於有了客戶端渲染，可以非常快速地過渡到其他頁面。

如果您使用平原a關聯：

const Index = () => (
  <div>
    <h1>Home page</h1>
    <a href='/blog'>Blog</a>
  </div>
)
export default Index

現在打開開發工具和網絡面板特別是。我們第一次加載http://localhost:3000/我們將加載所有頁面捆綁：

現在，如果您單擊“保留日誌”按鈕（以避免清除“網絡”面板），然後單擊“博客”鏈接，將發生以下情況：

我們再次從服務器獲得了所有JavaScript！但是..如果我們已經有了JavaScript，就不需要所有的JavaScript。我們只需要blog.js頁面捆綁包，這是該頁面上唯一的新捆綁包。

要解決此問題，我們使用Next提供的名為Link的組件。

我們導入它：

import Link from 'next/link'

然後我們用它來包裝我們的鏈接，像這樣：

import Link from 'next/link'
const Index = () => (
<div>
<h1>Home page</h1>
<Link href=’/blog’>
<a>Blog</a>
</Link>
</div>
)
export default Index

現在，如果您重試我們之前所做的操作，您將能夠看到只有blog.js當我們移至博客頁面時，將加載捆綁軟件：

並且頁面加載速度比以前快，該標籤上的瀏覽器常規微調框甚至都沒有出現。如您所見，URL發生了變化。這可以與瀏覽器無縫協作歷史API。

這是實際的客戶端渲染。

如果現在按下返回按鈕怎麼辦？沒有加載任何內容，因為瀏覽器仍舊index.js捆綁到位，準備加載/index路線。都是自動的！

這不是處理Next.js中鏈接的唯一方法，但我認為這是最簡單的方法。

免費下載我的Next.js手冊

使用鏈接在Next.js中鏈接兩個頁面

如何在Next.js中鏈接兩個或多個頁面

接下來的更多教程：