title: Next.js: getStaticProps and getStaticPaths with dynamic routes to generate static files
body: <p>I am finding the <a href="https://nextjs.org/blog/next-9-3#getstaticpaths" rel="noreferrer">docs</a> a little ambiguous. Given a list franchises, I would like to render out the relevant franchise detail pages at build time to avoid hitting the CMS/API at run time, as these don't change frequently.</p>
  <p>However, it seems that even if the relevant pages are generated at build time using <code>getStaticPaths</code>, they still require the calls in <code>getStaticProps</code> to be executed at runtime. This defeats the purpose of generating static pages.</p>
  <pre><code>import {withLayout} from '../../components/layout';
  import {getFranchises} from '../api/franchises';
  
  const Franchise = (props) =&gt; {
      console.info(props);
  
      return (
          &lt;&gt;
              &lt;h1&gt;{props.name}&lt;/h1&gt;
          &lt;/&gt;
      );
  };
  
  export async function getStaticProps({params}) {
      let data = await getFranchises();
  
      let franchise = data.find(x =&gt; x.id === params.id);
  
      return {
          props: franchise
      }
  }
  
  export async function getStaticPaths() {
      let data = await getFranchises();
  
      // Get the paths we want to pre-render based on posts
      const paths = data.map(post =&gt; ({
          params: {id: post.id},
      }));
  
      // We'll pre-render only these paths at build time.
      return {paths, fallback: false}
  }
  
  export default withLayout(Franchise);
  </code></pre>
  <p>Perhaps, I am doing something wrong, but I really am looking for some docs/demo on how to generate static pages at build time using <code>next build</code> that uses data from API at <strong>build</strong> time and does not require any further calls to populate props at <strong>runtime</strong>.</p>