getServerSideProps does not render dynamic pages in production, and show 404 error

Question

I'm working with next.js, in development mode everything works fine, but in production mode I have a problem when rendering the pages dynamically. I have the following path inside the pages folder pages/user/[id], and this component is where I call the getServerSideProps function.

import headers from '../../headers';

export async function getServerSideProps(context) {

  const URL = 'https://somewhere...';

  let { id } = context.params;

  const apiResponse = await fetch(
    `${URL}/${id}/detail`,
    {
      headers: headers,
    }
  ); 
  if (apiResponse.ok) {
    
    const data = await apiResponse.json();
    return {
      props: data, // will be passed to the page component as props
    };
  } else {   
    return { props: {} };
  }
  
}

My problem is the following, I need to send in headers the authentication token that I only get when I login and I get the 2FA code, so in build time, that info does not exist and I get a 401 error no authorizate when execute npm run build and when I access to /user/34 for example I get a 404 error.

I have checked these questions at stackoverflow:

• NextJs: Static export with dynamic routes
• https://stackoverflow.com/questions/61724368/what-is-the-difference-between-next-export-and-next-build-in-next-js#:~:text=After%20building%2C%20next%20start%20starts,can%20serve%20with%20any%20host.&text=js%20will%20hydrate%20your%20application,to%20give%20it%20full%20interactivity.
• next.js getStaticPaths list every path or only those in the immediate vicinity?

I have some parts in my app that are statics and works fine, but the problem is with the dynamic paths, as next.js is not creating those paths.

EDIT: I'll include a image with other problem, if after the fetch in the if I just say :

if(apiResponse){ //without 'ok'

}

I'll recieve this errror:

Answer 1

return {
      props: data, // will be passed to the page component as props
    }

props should be object

return {
          props: {data} // or props: {data:data}
        }