在NextJS中使用动态路由时如何将对象传递给页面组件？

Question

我正在 NextJS 中使用“应用程序”路由器，并希望在动态创建博客帖子页面的上下文中使用动态路由。

我在弄清楚如何将对象传递到动态创建的页面时遇到问题，例如类型为

Post

的

{id: number, title: string, likes: number}

对象。据我所知，这似乎不可能。

最好的情况是，我有一条路线

/posts/[id]

，例如

/posts/1

然后我就可以通过定义类型来捕获动态创建的页面中的

1

：

interface PostPageProps {
  params: {
    id: string;
  };
}

并像这样使用它：

export default async function PostPage({ params }: PostPageProps) {
    // ...
    // params.id is available to me.
}

但是，似乎不可能捕获整个自定义对象，例如动态创建页面中的

Post

对象。

---

目录结构

/app
  - /components
  - /posts
    - /[id]
      - page.tsx
    - page.tsx
  - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx

./app/posts/page.tsx

"use client";

// ...

type Post = {
  id: number;
  title: string;
  likes: number;
};

export default function Page() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchPosts() {
      ...
    }

    fetchPosts();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error}</p>;

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-3xl font-bold underline">
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`} className="block">
              {post.title}
            </Link>
          </li>
        ))}
      </h1>
    </main>
  );
}

./app/posts/[id]/page.tsx

type Post = {
  id: number;
  title: string;
  likes: number;
};

interface PostPageProps {
  params: {
    id: string;
  };
}

export default async function PostPage({ params }: PostPageProps) {
  const { id } = params;
  console.warn(params);
  return (
    <div>
      <h1>{id}</h1>
    </div>
  );
}

访问特定页面的一种方法是在加载数据后使用

PostPageProps

中给出的 id 过滤出感兴趣的特定帖子（数据以

.json

文件的形式存在于

/public

中） 。但是，这意味着我每次访问特定帖子页面时都必须加载整个 json 文件并针对特定帖子过滤它。从性能角度来看，这并不好，因此为什么我尝试将其全部加载到“父”页面中，我可以从该页面将每个内容发布到动态创建的页面（路由）。如果您在 NextJS 中使用应用程序路由器，这就是执行此操作的方法，请注意，这取代了

getStaticProps

的使用，这与我的情况无关。

如果有更好的方法，请随时赐教。

Answer 1

您不能直接将对象作为带有链接的道具传递，这是正确的。

一种方法是将对象属性作为查询参数与链接一起传递。然后使用 searchParams 检索它们。但这不是一个好方法。

更好的方法是使用

generateStaticParams

在构建时生成每个页面。