動態路由

由外部資料來改變路由

在前一堂課程中,我們講述了根據外部資料來改變頁面內容的案例。我們使用 getStaticProps 來抓取 index 頁面需要的資料。

在這一堂課,我們將會探討每個頁面路徑根據外部資料來變動的案例。Next.js 可以讓你用路徑產生頁面,而這個路徑就是外部資料提供。這就是 Next.js 中動態路由的運作方式。

頁面路徑根據外部資料變動示意圖

如何使用動態路由靜態產生頁面

在此次的範例,我們要幫部落格文章頁生成動態路由:

  • 我們要每一個文章路徑長這樣 /posts/<id><id> 代表的是在父層 posts 資料夾路徑底下的 markdown 檔案名稱。
  • 由於我們有 ssg-ssr.mdpre-rendering.md,我們想要讓這兩個路徑長這個樣子 /posts/ssg-ssr/posts/pre-rendering

來看看有哪些步驟

我們可以藉由以下幾個步驟來達到目的。 你可以先不做任何動作 — 因為我們在下一頁才會實作全部過程。

首先,我們將會在 pages/posts 路徑底下建立一支叫做 [id].js 的檔案。 檔名命名必須由 [ 為起頭,] 做結尾,這就是 Next.js 中動態路由命名方式。

pages/posts/[id].js 中,我們將會寫程式碼來渲染文章頁面 -- 跟我們前面做過的其他頁面一樣。

import Layout from '../../components/layout'; export default function Post() { return <Layout>...</Layout>; }

現在這裡是前面沒看過的: 我們將會在此動態產生的頁面中導出一個叫做 getStaticPaths 的非同步函式。在這個函式當中,我們需要為 id 回傳一個可能的值的清單。

import Layout from '../../components/layout'; export default function Post() { return <Layout>...</Layout>; } export async function getStaticPaths() { // Return a list of possible value for id }

最後,我們需要再次執行 getStaticProps 一次 - 這次,要使用 id 去抓取部落格文章需要的資料。在 getStaticProps 你可以使用 params 來去取的當前動態路由的 id(因為檔案名稱為 [id].js)。

import Layout from '../../components/layout'; export default function Post() { return <Layout>...</Layout>; } export async function getStaticPaths() { // Return a list of possible value for id } export async function getStaticProps({ params }) { // Fetch necessary data for the blog post using params.id }

這個圖片展示了我們剛剛談到的內容:

動態路由產生頁面示意圖

下個頁面,我們開始來實作看看!

本篇文章由YONG-LIN-LIANG

YONG-LIN-LIANG

貢獻翻譯。瞭解如何參與貢獻