exportPathMap (已棄用)

此功能專用於 next export，目前已棄用，建議改用 pages 中的 getStaticPaths 或 app 中的 generateStaticParams。

exportPathMap 讓您可以指定請求路徑到頁面目的地的映射，以便在匯出期間使用。在 next dev 中使用時，exportPathMap 中定義的路徑也將可用。

讓我們從一個例子開始，為一個具有以下頁面的應用程式建立一個自訂的 exportPathMap

• pages/index.js
• pages/about.js
• pages/post.js

開啟 next.config.js 並新增以下 exportPathMap 設定

module.exports = {
  exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
      '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
      '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } },
    }
  },
}

注意事項：exportPathMap 中的 query 欄位不能與 自動靜態優化頁面 或 getStaticProps 頁面 一起使用，因為它們在建置時會渲染成 HTML 檔案，並且在 next export 期間無法提供額外的查詢資訊。

然後頁面將會被匯出為 HTML 檔案，例如，/about 將會變成 /about.html。

exportPathMap 是一個非同步函式 (async function)，它接收兩個參數：第一個是 defaultPathMap，它是 Next.js 使用的預設映射。第二個參數是一個物件，包含：

• dev - 當在開發環境中呼叫 exportPathMap 時為 true。執行 next export 時為 false。在開發環境中，exportPathMap 用於定義路由。
• dir - 專案目錄的絕對路徑
• outDir - out/ 目錄的絕對路徑（可使用 -o 設定）。當 dev 為 true 時，outDir 的值將為 null。
• distDir - .next/ 目錄的絕對路徑（可使用 distDir 設定）
• buildId - 產生的建置 ID

返回的物件是一個頁面映射，其中 key 是 pathname，而 value 是一個接受以下欄位的物件：

• page：String - 要渲染的 pages 目錄內的頁面
• query：Object - 預渲染時傳遞給 getInitialProps 的 query 物件。預設為 {}

匯出的 pathname 也可以是一個檔名（例如，/readme.md），但如果它的內容與 .html 不同，您可能需要在提供其內容時將 Content-Type 標頭設定為 text/html。

加入尾端斜線

可以將 Next.js 設定為將頁面匯出為 index.html 檔案並要求尾端斜線，/about 將變成 /about/index.html，並且可透過 /about/ 進行路由。這是 Next.js 9 之前的預設行為。

要切換回並新增尾端斜線，請開啟 next.config.js 並啟用 trailingSlash 設定

module.exports = {
  trailingSlash: true,
}

自訂輸出目錄

next export 指令會預設使用 out 作為輸出目錄，您可以使用 -o 參數來自訂輸出目錄，如下所示：

next export -o outdir

警告：使用 exportPathMap 已被棄用，並且會被 pages 目錄中的 getStaticPaths 覆蓋。我們不建議同時使用它們。