<h1 dir="auto">404 error flashes when rendering custom routes on clientside</h1>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Related issues:</h2>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="234705143" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2208" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2208/hovercard" href="https://github.com/vercel/next.js/issues/2208">#2208</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="252066238" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2833" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2833/hovercard" href="https://github.com/vercel/next.js/issues/2833">#2833</a></p>
<h2 dir="auto">Expected Behavior</h2>
<ul dir="auto">
<li>Routes to render correctly on both client and server.</li>
<li>Be able to define a link using <code class="notranslate">next/link</code> with only one prop, <code class="notranslate">href</code>, which contains the actual url.</li>
<li>Define routes in one place.</li>
</ul>
<p dir="auto">Example route: <code class="notranslate">/posts/:id</code>.</p>
<h2 dir="auto">Current Behavior</h2>
<ul dir="auto">
<li>The <code class="notranslate">next/link</code> component requires manually passing url parameters. This can be a bit inconvenient when attempting to navigate to a url string from a json response.</li>
</ul>
<p dir="auto">For example, if you have a simple blog backend that outputs a json response:<br>
<code class="notranslate">{ "posts": [{... "link": "/posts/my-first-post"}] }</code></p>
<p dir="auto">Doing something like this does not work:<br>
<code class="notranslate">posts.map(post =&gt; &lt;Link href={post.link} /&gt;)</code></p>
<p dir="auto">The link will go to a 404 page and then it seems like the browser does a full reload and it gets rendered properly by the server.</p>
<h2 dir="auto">Ideas</h2>
<ul dir="auto">
<li>Allow custom routes to be defined in next.config.js and have the framework configure them</li>
</ul>
<p dir="auto"><code class="notranslate">next.config.js</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  routes: [ ... { route: '/posts/:slug', component: '/posts/single' } ]
}"><pre class="notranslate"><code class="notranslate">{
  routes: [ ... { route: '/posts/:slug', component: '/posts/single' } ]
}
</code></pre></div>
<p dir="auto">Somewhere in <code class="notranslate">const { prepare } = require('next')</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="config.routes.forEach(({route, component}) =&gt; {
  server.get(route), (req, res) =&gt; {
    app.render(req, res, component, req.params);
 }); 
})"><pre class="notranslate"><code class="notranslate">config.routes.forEach(({route, component}) =&gt; {
  server.get(route), (req, res) =&gt; {
    app.render(req, res, component, req.params);
 }); 
})
</code></pre></div>
<p dir="auto">As described here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="186126851" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/159" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/159/hovercard?comment_id=257318970&amp;comment_type=issue_comment" href="https://github.com/vercel/next.js/issues/159#issuecomment-257318970">#159 (comment)</a> and as far as I understand, if some React component has a <code class="notranslate">getInitialProps</code>, then all of its parents are condemned to need it too, and each parent in turn needs to call <code class="notranslate">getInitialProps</code> on their children, in the right order, making sure not to duplicate the work between the different levels of ancestry (the linked issue shows the case of a higher-component style, but the same applies when passing components as React children the normal way).</p>
<p dir="auto">Forgetting one of these calls can lead to silent bugs such as not having server-side rendering, and this code repetition can hinder proper componentization (one of React's key patterns).</p>
<p dir="auto">From an end-user perspective, just like with React component lifecycle methods such as <code class="notranslate">componentWillMount</code> etc, IMHO the developer should trust that <code class="notranslate">getInitialProps</code> will be called no matter what, as long as it's spelled properly.</p>
<p dir="auto">Could Next.js handle <code class="notranslate">getInitialProps</code> as part of the React component lifecycle or implement the same kind of magic to make sure it gets called whenever defined in a component?</p>
<p dir="auto">I'm new to SSR and Next.js, so apologies if this makes no sense <g-emoji class="g-emoji" alias="smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png">😄</g-emoji></p>