【问题标题】：Next.js static site generation, why is getStaticProps params empty?Next.js 静态站点生成，为什么 getStaticProps 参数为空？
【发布时间】：2020-07-22 21:41:46
【问题描述】：

简介

我正在使用 next.js 构建一个应用程序。使用其静态站点生成。由于某种原因，getStaticProps 中的 params 对象为空。我已经阅读了过去几个小时的示例和停靠站，但看不出原因。也许有更多经验的人可以发现问题。

/pages/projects/[id].js

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
    ],
    fallback: false
  };
}


export async function getStaticProps({params}) {
  console.log(params); // params is just an empty object
  const { data: projectData } = await axios(`${CMS_URL}/projects/${params.id}`);
  console.log(projectData);
  return {
    props: {
      ...projectData,
    }
  };
}

export default function ProjectDetailPage(props) { ...

next.config.js

...
exportPathMap: async () => {
    const paths = {
      '/': { page: '/' },
      '/blog': { page: '/overview' },
    };

    const { data: projectsData } = await axios(`${apiUrl}/projects`);
    projectsData.forEach(project => {
      paths[`/projects/${project.id}`] = { page: '/projects/[id]', query: { id: project.id } };
    });

    console.log(paths);
    /*
      {
        '/': { page: '/' },
        '/blog': { page: '/overview' },
        '/projects/1': { page: '/projects/[id]', query: { id: 1 } }
      }
     */

    return paths;
  }
...

问题

我添加了正确的文件夹结构和exportPathMap。还将静态路径和道具添加到我的组件中。我不明白为什么 params 对象是空的。你能告诉我为什么它不起作用吗？

【问题讨论】：

标签： javascript reactjs next.js server-side-rendering

【解决方案1】：

getStaticProps 在开发中针对每个请求执行，但是在生产中，它已经在构建期间执行。因此，在您部署应用程序之前，带有getStaticProps 的页面已经创建并缓存在服务器上。由于在构建期间没有浏览器，因此您无法访问参数或查询。因为参数和查询存在于路线上。

回答您问题的@thibaut devigne 说他已修复，但他没有解决。他的代码有效，因为他静态获取getStaticPath 中的路径，并且一旦生成“路径”，它们就会被传递给getStaticProps。

【讨论】：

【解决方案2】：

我几乎遇到了同样的问题，但我不太确定我是如何解决它的，但它现在对我有用：

function Workshop({workshop}) {
    return (
        <div>
            Hello World
        </div>
    )
}

export async function getStaticProps({params}) {    
    const workshop = await axios.get('/your/url/here');
    return { props: { workshop: workshop.data } }
}

export async function getStaticPaths() {
    return { 
        paths: [
            { params: { id: '1' } },
            { params: { id: '2' } },
            { params: { id: '3' } }
          ], 
        fallback: false 
    }
}

export default Workshop;

这是我的 next.config.js 文件：

module.exports = {
    pageExtensions: ['jsx', 'js'],
    exportPathMap: async function (
            defaultPathMap, 
            { dev, dir, outDir, distDir, buildId }
        ) {
        return {
            '/': { page: '/' },
            '/workshops': { page: '/workshops' },
            '/workshops/[id]': { page: '/workshops/[id]' },
        }
    }
}

然后是我的结构文件夹：页面/研讨会/[id].js

我希望它有所帮助。

【讨论】：