有没有办法将ID和Slug从getStaticPaths传递到getStaticProps [nextjs]

在Next.js中，可以通过将ID和Slug从getStaticPaths传递到getStaticProps来实现。getStaticPaths用于生成动态路由的路径，而getStaticProps用于获取动态路由的数据。

首先，在页面组件中，需要导入getStaticPaths和getStaticProps函数：

import { getStaticPaths, getStaticProps } from 'next';

// 页面组件代码...

然后，定义getStaticPaths函数来生成动态路由的路径。在该函数中，可以从数据源（如数据库或API）获取ID和Slug的列表，并返回一个包含所有可能路径的对象。

export const getStaticPaths = async () => {
  // 从数据源获取ID和Slug的列表
  const paths = [
    { params: { id: '1', slug: 'example-1' } },
    { params: { id: '2', slug: 'example-2' } },
    // 其他路径...
  ];

  return {
    paths,
    fallback: false // 如果为true，则允许访问未在paths中定义的路径
  };
};

接下来，定义getStaticProps函数来获取动态路由的数据。在该函数中，可以根据传递的ID和Slug参数从数据源获取相应的数据，并将其作为props返回。

export const getStaticProps = async ({ params }) => {
  // 从数据源根据ID和Slug获取数据
  const data = {
    id: params.id,
    slug: params.slug,
    // 其他数据...
  };

  return {
    props: {
      data
    }
  };
};

最后，在页面组件中，可以通过props来访问传递的ID和Slug数据。

const Page = ({ data }) => {
  // 使用传递的ID和Slug数据
  return (
    <div>
      <h1>ID: {data.id}</h1>
      <h1>Slug: {data.slug}</h1>
      {/* 其他页面内容... */}
    </div>
  );
};

export default Page;

这样，就可以将ID和Slug从getStaticPaths传递到getStaticProps，并在页面组件中使用它们了。

对于Next.js的更多信息和相关产品介绍，可以参考腾讯云的官方文档：