使用 MongoDB 在 Next.js 中創建帖子頁面及其 URL 的最佳方法？

Question

我的 MongoDB 數據看起來像這樣

{
  "_id": {
    "$oid": "630f3c32c1a580642a9ff4a0"
  },
  "title": "this is a title",
  "paragraph": "this is a paragraph"
}

我的頁面文件夾看起來像這樣

[posts].js
_app.js
index.js

在 index.js 中，我使用getStaticProps()從 MongoDB 獲取數據然后從 next.js 鏈接組件我使用 MongoDB 為 [posts].js 創建了一個新 URL

<div>
 {data.map((myData) => (
   <h2>
   <Link href={`/${encodeURIComponent(myData._id)}`}>
   <a>{myData._id}</a>
   </Link>
   </h2>
 ))}
</div>

在 [posts].js getStaticPaths()方法中，我使用相同的 MongoDB _Id 來獲取所有這樣的路徑

const paths = data.map((myData) => {
      return {
        params: {
          postPage: data._id.toString(),
        }
      }
    })

  return {
    paths, 
    fallback: false,
  }

然后在同一個 [post].js 中，我使用 getStaticProps(context) 獲取 MongoDB _Id 並僅通過其 _Id 獲取有關該文檔的數據，如下所示

const postId = context.params.postPage;

  const { db } = await connectToDatabase();
  const posts = await db
    .collection("posts")
    .find({"_id": new ObjectID(`${postId}`)})
    .toArray();

它工作正常，但我希望標題是我的 URL 用於 SEO，並且還想通過它的 _Id 找到文檔。

我怎樣才能做到這一點？

Answer 1

如果您的標題字段是唯一的，那么您可以在數據庫中搜索它而不是 id。

如果它不是唯一的，那么您可以根據唯一的標題生成一個 slug（任何可以生成更好的唯一字符串的方式）

您可以在 URL 中有兩個變量，第一個是 id，第二個是標題，然后通過 id 獲取並驗證標題。 （類似於此頁面的工作方式！）

Answer 2

您可以使用 state import { useState } from 'react'; 存儲文檔的 _id 並將其傳遞到 [posts].js 以獲取有關該文檔的數據。