我想使用 Next.js 15 应用程序路由制作动态博客详细信息页面，它应该与 SSR 兼容，以便更好地进行 SEO，但我遇到了以下错误

Question

我想为我的 Next.js 网站制作动态博客详细信息页面，下面的代码在开发期间和 localhost:3000 中浏览期间工作正常，但是当我尝试构建时，我遇到了以下错误，我是使用 Next.js 15.0.3 应用程序路由版本，我想让我的页面 SSR 兼容，这样它可以帮助我更好的 SEO，你能帮我修复以下错误并满足我的要求吗？

我的博客详细信息页面的路径： /src/app/Blogs/[id]/page.tsx

构建时间错误：

Linting and checking validity of types  .Failed to compile.

.next/types/app/blogs/[id]/page.ts:34:29
Type error: Type 'BlogPageProps' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]   

  32 |
  33 | // Check the prop type of the entry function
> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
     |                             ^
  35 |
  36 | // Check the arguments and return type of the generateMetadata function
  37 | if ('generateMetadata' in entry) {

Page.tsx 文件

import { Container } from "@mui/material";
import LhContentWithRhSlider from "@/components/LhContentWithRhSlider";
import { notFound } from "next/navigation";
import SEO from "@/components/utils/SEO";
import blogs from "@data/blogs.json";

// Blog type
interface Blog {
  id: string;
  title: string;
  description: string[];
  thumbnail: string;
  sliderImages: string[];
  date: string;
  author: string;
  category: string;
  externalLink: string;
  keywords: string[];
}

const blogsData: Blog[] = blogs;

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

// Dynamic Blog Page Component
const BlogDetailsPage = ({ params }: BlogPageProps) => {
  const { id } = params;
  const blog = blogsData.find((b) => b.id === id);

  // If blog is not found, show a 404 page
  if (!blog) {
    notFound();
  }

  return (
    <Container>
      {/* SEO Optimization */}
      <SEO
        title={blog.title}
        description={blog.description.join(" ")}
        url={"www.jogwad.com/blogs/"}
        image={blog.thumbnail}
        keywords={blog.keywords.join(",")}
        canonicalUrl={"www.jogwad.com/blogs/"}
        schemaType={"BlogPost"}
      />

      <LhContentWithRhSlider
        title={blog.title}
        subtitle={`Date: ${new Date(
          blog.date
        ).toLocaleDateString()} | Author: ${blog.author} | Category: ${
          blog.category
        }`}
        description={[blog.description.join(" ")]}
        buttonText={blog.externalLink ? "Visit External Link" : ""}
        buttonLink={blog.externalLink || ""}
        sliderImages={blog.sliderImages}
      />
    </Container>
  );
};

export default BlogDetailsPage;

Answer 1

您在第 34 行遇到的错误是由于在 nextJs 15 中，参数是异步的，您需要使您的打字稿接口/类型将参数包装在 Promise 中。

interface BlogPageProps{
params: Promise<{ id: string }>
}

您可以在nextjs网站上阅读更多内容

希望这有帮助。