Next.js static site generation, why is getStaticProps params empty?

user_2504407 0
Viewed 1624

Intro

I'm building an app with next.js. Using its static site generation. For some reason the params object in getStaticProps is empty. I've read the examples and docks for the last few hours and cannot see why the cause. Perhaps someone with more next experience can spot the problem.

/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;
  }
...

enter image description here

Question

I've added the correct folder structure, and exportPathMap. Also added the static path and props to my component. I cant see why the params object is empty. Can you tell me why it is not working?

server-side-rendering next.js reactjs javascript
2 Answers

getStaticProps is executed upon each request in development, however in production, it gets already gets executed during the build time. So before you even deploy your app, pages with getStaticProps are already created, cached on the server. Since during the build time, there is no browser, you cannot access to params or query. Becase params and query lives on the route.

@thibaut devigne who answered your question says he fixed but he does not how. His code works because he statically gets the path in getStaticPath, and once the "paths" are generated they are being passed to getStaticProps.

user_102628050

I almost had the same problem but I'm not so sure about how I fixed it but it is working for me now: 

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;

This is my next.config.js file :

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

And then my structure folder : pages / workshops / [id].js

I hope it helps.

user_110809710
Related