使用鏈接在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.jsblog.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手冊


接下來的更多教程: