<p dir="auto">It would be great to be able to specify the API dir location, please refer to <a href="https://spectrum.chat/next-js/general/next-9-is-there-a-config-option-to-change-where-the-api-dir-is-located~81da11ce-cd38-4fb5-bcda-9e95ee07db14" rel="nofollow">https://spectrum.chat/next-js/general/next-9-is-there-a-config-option-to-change-where-the-api-dir-is-located~81da11ce-cd38-4fb5-bcda-9e95ee07db14</a></p>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">Next.js v9.0.0 hard codes the route name of the API path: <code class="notranslate">/api/</code>.</p>
<p dir="auto"><a href="https://github.com/zeit/next.js/blob/71f9288a54c32420a18a07035ea7a73c9c3c50e5/packages/next/lib/constants.ts#L19">https://github.com/zeit/next.js/blob/71f9288a54c32420a18a07035ea7a73c9c3c50e5/packages/next/lib/constants.ts#L19</a></p>
<p dir="auto">In Material-UI, we host pages under the <code class="notranslate">/api/</code> folder. For instance: <a href="https://v3.material-ui.com/api/app-bar/" rel="nofollow">https://v3.material-ui.com/api/app-bar/</a>. It forces us to rename this folder. This has an SEO impact.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">We would be interested in having an option to configure this path. For instance, I could imagine something like:</p>
<p dir="auto"><strong>next.config.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  apiRoutePath: 'json-api',
};"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">apiRoutePath</span>: <span class="pl-s">'json-api'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Additional context</h2>
<ul dir="auto">
<li>The related thread on our side: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="473061495" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/16752" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/16752/hovercard" href="https://github.com/mui/material-ui/pull/16752">mui/material-ui#16752</a></li>
<li>I had an initial discussion about the problem with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/timneutkens/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/timneutkens">@timneutkens</a> on Twitter.</li>
<li>It seems relatively simple to implement as we have access to the config here:<br>
<a href="https://github.com/zeit/next.js/blob/71f9288a54c32420a18a07035ea7a73c9c3c50e5/packages/next/build/entries.ts#L51">https://github.com/zeit/next.js/blob/71f9288a54c32420a18a07035ea7a73c9c3c50e5/packages/next/build/entries.ts#L51</a></li>
</ul>