title: Next.js getServerSideProps use /api locally, in PR preview, and in production
body: <p>This is almost directly from some of the example on the Next.js site.</p>
  
  <pre><code>function HomePage(props) {
    return (
      &lt;div&gt;
        &lt;p&gt;Welcome to {props.data.name} Next.js!&lt;/p&gt;
        &lt;img src="/conexon-logo-white.png" alt="my image" /&gt;
      &lt;/div&gt;
    );
  }
  
  // This gets called on every request
  export async function getServerSideProps(context) {
    const res = await fetch('http://localhost:3000/api/test');
    const data = await res.json();
  
    // Pass data to the page via props
    return { props: { data } };
  }
  
  export default HomePage;
  </code></pre>
  
  <p>That code works great locally of course. But how can I replace the <code>http://localhost:3000</code> with something "dynamic" depending on where the site is running? The site could be running locally (localhost), a preview URL created by Vercel (something-random.now.sh), another Vercel URL (something-else.now.sh), or a custom URL (mydomain.com). Is there a way to determine how to make that call the Next.js /api on all of those without a <code>.env</code> file? With the <code>.env</code> file I wouldn't know how to set it for the "dynamic" URLs created by Vercel for previews (and other Vercel URLs).</p>
  
  <p>Thanks!</p>