nextjs 參數在構建期間不可用

Question

我將 nextjs 13 與實驗性應用程序目錄一起使用。 我的應用程序使用動態路由，如下所示：

https://app.domain/[itemid]/[slug]

在我的[slug]目錄中，如果我創建pages.jsx ，一個服務器站點路由，具有以下內容：

export default async function pageComponent ({ params, ...props }) {

    console.log('params': params);
    const data = await afunction(params.itemid);
    ...

當我以dev身份運行時，該應用程序按預期工作。 一個url如：

https://app.domain/44/pagetitle

正如我所料，在控制台中輸出params.itemid = '44'和params.slug = 'pagetitle' 。

問題

我無法構建用於生產的應用程序。 如果我運行npm npm run build ，它會嘗試編譯page.jsx並發現pageComponent上的函數未定義，因為它沒有params.itemid 。 用戶從未針對特定的 url，因此在構建時沒有生成任何參數。 參數來自不斷增長的數據庫中設置的動態值。 數據庫中的各種值可能會被編輯，所以我不想要一個完整的 static 頁面。

研究

根據文檔，我不確定我還應該如何處理這個問題。 我覺得我在這里錯過了一步，但我覺得我不需要generateStaticParams但也許我在這一步上錯了？

Answer 1

畢竟，在我的情況下，解決方案是添加一個generateStaticParams function。 在文檔中的動態段下有一個對它的簡單引用，我將其作為可選首選項閱讀。 盡管我（還）對在構建時創建 static 個頁面不感興趣，但一旦構建和使用服務器端組件，我就無法在不使用它的情況下讓參數工作。

對於我的用例，我嘗試創建一個 static 頁面，使用它：

export async function generateStaticParams() {

    const staticParams = [
        { 
            itemid: '4214', 
            slug: 'apagetitle'
        }
    ]
    return staticParams;
}

這使得應用程序能夠成功構建。 請注意，這僅用於測試目的並試圖更好地理解問題。 根據示例，這旨在為數據庫的整個或大部分生成 static 頁，文檔中的示例很好地說明了這一點。