<h1 dir="auto">Feature request</h1>
<p dir="auto">Request to add the documentation on how to add routes dynamically in Router array in server.js or any other appropriate place when an API call can be made.<br>
I would like to avoid custom server and stay with Next.js defaults.</p>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">I have some urls like following.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="http://ww.example.com/something/   -&gt; somePage.js
http://ww.example.com/something/hello/hi   -&gt; somePage.js
http://ww.example.com/xyz/hello/hi   -&gt; somePage.js
http://ww.example.com/abc/hello/hi   -&gt; otherPage.js
http://ww.example.com/abc/dfg   -&gt; otherPage.js
http://ww.example.com/water  -&gt; otherPage.js
http://ww.example.com/toys  -&gt; anyPage.js"><pre class="notranslate"><code class="notranslate">http://ww.example.com/something/   -&gt; somePage.js
http://ww.example.com/something/hello/hi   -&gt; somePage.js
http://ww.example.com/xyz/hello/hi   -&gt; somePage.js
http://ww.example.com/abc/hello/hi   -&gt; otherPage.js
http://ww.example.com/abc/dfg   -&gt; otherPage.js
http://ww.example.com/water  -&gt; otherPage.js
http://ww.example.com/toys  -&gt; anyPage.js
</code></pre></div>
<p dir="auto">The issue is that none of the URLs have any info about the Page that they need to map to. Also they don't follow any pattern.</p>
<p dir="auto">All the example I found have page info in the url like this <code class="notranslate">/post/[id]</code> or <code class="notranslate">/post/postName</code>, so it becomes easier to identify the page the url map to but in my case page info or any other hint is not there.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I want to add the above url mappings that can go to any number in future but at present I have something like 300 urls.</p>
<p dir="auto">I would like to add all urls as routes to page mappings in routes array, as shown in pic.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/42976790/63362549-032b3f80-c340-11e9-8739-2dfb8e8c57f3.png"><img width="913" alt="Screen Shot 2019-08-20 at 10 44 03 AM" src="https://user-images.githubusercontent.com/42976790/63362549-032b3f80-c340-11e9-8739-2dfb8e8c57f3.png" style="max-width: 100%;"></a><br>
I found the following code in Next.js source code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/// &lt;reference types=&quot;node&quot; /&gt;
import { IncomingMessage, ServerResponse } from 'http';
import { UrlWithParsedQuery } from 'url';
export declare const route: (path: string) =&gt; (pathname: string | undefined, params?: any) =&gt; any;
export declare type Params = {
    [param: string]: any;
};
export declare type RouteMatch = (pathname: string | undefined) =&gt; false | Params;
export declare type Route = {
    match: RouteMatch;
    fn: (req: IncomingMessage, res: ServerResponse, params: Params, parsedUrl: UrlWithParsedQuery) =&gt; void;
};
export default class Router {
    routes: Route[];
    constructor(routes?: Route[]);
    add(route: Route): void;
    match(req: IncomingMessage, res: ServerResponse, parsedUrl: UrlWithParsedQuery): (() =&gt; void) | undefined;
}"><pre class="notranslate"><code class="notranslate">/// &lt;reference types="node" /&gt;
import { IncomingMessage, ServerResponse } from 'http';
import { UrlWithParsedQuery } from 'url';
export declare const route: (path: string) =&gt; (pathname: string | undefined, params?: any) =&gt; any;
export declare type Params = {
    [param: string]: any;
};
export declare type RouteMatch = (pathname: string | undefined) =&gt; false | Params;
export declare type Route = {
    match: RouteMatch;
    fn: (req: IncomingMessage, res: ServerResponse, params: Params, parsedUrl: UrlWithParsedQuery) =&gt; void;
};
export default class Router {
    routes: Route[];
    constructor(routes?: Route[]);
    add(route: Route): void;
    match(req: IncomingMessage, res: ServerResponse, parsedUrl: UrlWithParsedQuery): (() =&gt; void) | undefined;
}
</code></pre></div>
<p dir="auto"><em>This code declares Route but I am not sure how do I create a new Route and add it to routes array so routing happens automatically.</em><br>
<em>I would like to add all the routes to routes array at the server start-up and update them after a set interval.</em></p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">At present I have something like following working, on server side:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="app.prepare().then(() =&gt; {
  createServer((req, res) =&gt; {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;
    if (urlMappings.includes(pathname)) {
      // the path value should be externalized later.
      // So mappings can changed without redeploying the app.
      //Current pathname passed as query param to mypage.
      app.render(req, res, '/mypage', { ...query, newQueryParam: pathname });
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(port, err =&gt; {
    if (err) throw err;
    console.log(`&gt; Ready on http://localhost:${port}`);
  });
});"><pre class="notranslate"><code class="notranslate">app.prepare().then(() =&gt; {
  createServer((req, res) =&gt; {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;
    if (urlMappings.includes(pathname)) {
      // the path value should be externalized later.
      // So mappings can changed without redeploying the app.
      //Current pathname passed as query param to mypage.
      app.render(req, res, '/mypage', { ...query, newQueryParam: pathname });
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(port, err =&gt; {
    if (err) throw err;
    console.log(`&gt; Ready on http://localhost:${port}`);
  });
});
</code></pre></div>
<ul dir="auto">
<li>The problem with this approach is that I have to maintain large array and do if-else in server.js.</li>
<li>Also the routes can not be updated if new pages are added to URL array.</li>
<li><code class="notranslate">if (urlMappings.includes(pathname)) {</code></li>
</ul>
<p dir="auto">On Client Side I am able to utilize <code class="notranslate">Link</code> component <code class="notranslate">as</code> feature to change the displayed link in browser.</p>
<p dir="auto">Other approach I am thinking of is to make an api call in server.js to get url to page mapping but thats expensive as it added some time to each request.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Is there any way to ask Next.js that if this url maps to any of its page, if it maps I will let Next.js handle the request, else I can check in url array and do custom mappings to page, so I dont check url array for all valid requests that map to pages directly ?</p>
<p dir="auto">I asked similar question on stackoverflow and Spectrum but have not received any response. So this is my last place to ask for help. I am new to JS or TS, still building the understanding on how they work. Thanks in advance.</p>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">url structures are still visible on devices, so its a UI-element and often is bound to editorial decisions, yet in nextjs, url routes always reflect the filesystem of the project</p>
<p dir="auto">Having the filename of a page be the route path segment might be ok, if you develop for an english target group, but leads to problems in other markets. E.g. in switzerland we often need to have an app in multiple languages and customers often wish that the url paths are also translated.</p>
<p dir="auto">Also, there is a common practice, that source code is always in english. So this leads to the problem, that when you decide to have e.g. german url paths, you need to have german-named files in your app, which just feels wrong.</p>
<p dir="auto">Nextjs should therefore provide a firstclass support to translate url path segments.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">There should be a way to provide aliases to pages in code. So a page would be delivered on all available aliases. It should be possible to use translation services to provide these aliases. They should work both on server and on client.</p>
<p dir="auto">If you use a <code class="notranslate">&lt;Link /&gt;</code>�  to a page, you can provide some context, so that nextjs would use the right alias to make the route. E.g. you could provide the locale.</p>
<p dir="auto">I don't know nextjs good enough to suggest an api for it yet, but suggestions are very welcome!</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">Doing it with dynamic routes (next 9 feature), is nearly impossible, because every page and folder would basically look like <code class="notranslate">[slug].js</code>, so you would need to deliver the right page yourself, defeating the purpose of the whole file-system-routing.</p>
<p dir="auto">It's only possible with a custom server and some boilerplate, so that your <code class="notranslate">&lt;Link /&gt;</code> behave correctly. But this is needs careful setup, so that you don't have duplicated route declarations and it is therefore error-prone.</p>