Next.js静态站点生成，为什么getStaticProps参数为空？

Question

简介

我正在使用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对象为空。你能告诉我为什么它不起作用吗？

Answer 1

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

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

我希望它会有所帮助。

Answer 2

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

@thibaut devigne 回答了您的问题，他说他解决了，但他不知道如何解决。他的代码之所以有效，是因为他静态地获取了 getStaticPath 中的路径，并且一旦生成了“路径”，它们就会被传递给 getStaticProps。