<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">By default next.js automatically routes /api/file, we need a way to access the api through relative path. It is currently forbidden in next.js probably due to the need to support SSR, though it should be possible to supply the address where api could be accessed from the req header.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">add something like appAddress in context parameter of getInitialProps</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">.env or other configuration setting to customize, though it creates overhead for a usual use-case.</p>
<h2 dir="auto">Additional context</h2>
<h1 dir="auto">Feature request</h1>
<p dir="auto">Add <code class="notranslate">hostname</code> parameter in <code class="notranslate">ctx</code> which returns current hostname on both server and client.</p>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">We have 2 web apps - Next.js frontend and Django API. We use Nginx to proxy routes so both are using the same host but API is hosted under <code class="notranslate">/api</code>. And because we deliver our app to VPS we don't know the current host so we can't just use <code class="notranslate">localhost</code>.</p>
<p dir="auto">I have to use custom _app without prerendering so my page only renders on server.</p>
<p dir="auto">Here's my _app:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
import App from 'next/app'

class CustomApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let host

    if (ctx.req) {
      host = ctx.req.headers.host
    } else {
      host = location.hostname
    }

    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps({ ...ctx, host })
    }
    return { pageProps }
  }
  render() {
    const { Component, pageProps } = this.props
    return &lt;Component {...pageProps} /&gt;
  }
}
export default CustomApp"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-v">App</span> <span class="pl-k">from</span> <span class="pl-s">'next/app'</span>

<span class="pl-k">class</span> <span class="pl-v">CustomApp</span> <span class="pl-k">extends</span> <span class="pl-v">App</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-k">async</span> <span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-kos">{</span> Component<span class="pl-kos">,</span> ctx <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">host</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">ctx</span><span class="pl-kos">.</span><span class="pl-c1">req</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">host</span> <span class="pl-c1">=</span> <span class="pl-s1">ctx</span><span class="pl-kos">.</span><span class="pl-c1">req</span><span class="pl-kos">.</span><span class="pl-c1">headers</span><span class="pl-kos">.</span><span class="pl-c1">host</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
      <span class="pl-s1">host</span> <span class="pl-c1">=</span> <span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">hostname</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">let</span> <span class="pl-s1">pageProps</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-v">Component</span><span class="pl-kos">.</span><span class="pl-c1">getInitialProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">pageProps</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-v">Component</span><span class="pl-kos">.</span><span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-kos">{</span> ...<span class="pl-s1">ctx</span><span class="pl-kos">,</span> host <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span> pageProps <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> Component<span class="pl-kos">,</span> pageProps <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Component</span> <span class="pl-kos">{</span>...<span class="pl-s1">pageProps</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">CustomApp</span></pre></div>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I can make a PR with this custom <code class="notranslate">getInitialProps</code> argument so it will be accessible via <code class="notranslate">ctx.hostname</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Page.getInitialProps = async ({ hostname }) =&gt; {
  const res = await fetch(`${hostname}/some-proxied-api/data`)
}"><pre class="notranslate"><span class="pl-v">Page</span><span class="pl-kos">.</span><span class="pl-en">getInitialProps</span> <span class="pl-c1">=</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> hostname <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">res</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-en">fetch</span><span class="pl-kos">(</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">hostname</span><span class="pl-kos">}</span></span>/some-proxied-api/data`</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">Write a function <code class="notranslate">getHost</code> and call it in every <code class="notranslate">getInitialProps</code>. Not very suitable especially when you have tons of pages with using <code class="notranslate">getInitialProps</code>.</p>