<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">Expected Behavior</h2>
<p dir="auto">We should have documented as an example how to use the new <a href="https://github.com/zeit/next-plugins/tree/master/packages/next-css">next-css</a> plugin</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">We have a few examples to import <code class="notranslate">.css</code> files which are mostly hacks to make it work.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">With the release of Next.js v5 the current examples of importing CSS are outdated and can be simplified with the new <a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-css">next-css</a> plugin.</p>
<p dir="auto">I have been contracted to work on an SPA, and some of it is using forms. The problem is the forms action goes to a custom route. My current solution is:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;form
  action=&quot;/page&quot;
  method=&quot;get&quot;
  onSubmit={e =&gt; {
    e.preventDefault()
    Router.push(`/search/${this.state.hashedSearch}`);
  }}
&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">form</span>
  <span class="pl-c1">action</span><span class="pl-c1">=</span><span class="pl-s">"/page"</span>
  <span class="pl-c1">method</span><span class="pl-c1">=</span><span class="pl-s">"get"</span>
  <span class="pl-c1">onSubmit</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">e</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-en">preventDefault</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s">`/search/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">hashedSearch</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">}</span>
<span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">The problem is this forces the page to do a full reload. I'm a little jealous that with links, we can easily do <code class="notranslate">&lt;Link href="/search" as={</code>/search?id=${this.state.someValueFromForm}<code class="notranslate">} /&gt;</code> but there isn't a nice <code class="notranslate">&lt;form&gt;</code> equivalent. We're trying to keep a certain A11y standard, so using real forms and form validation is very important.</p>
<p dir="auto">On the server-side, I have:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const routes = [
  { to: '/search', matcher: route('/search/:hash') },
  // ...
];

// ...
app.prepare().then(() =&gt; {
  createServer((req, res) =&gt; {
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;
    for (let r of routes) {
      const params = r.matcher(pathname);
      if (params !== false) {
        return app.render(req, res, r.to, Object.assign({}, params, query));
      }
    }
    handle(req, res, parsedUrl);
  });
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">routes</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
  <span class="pl-kos">{</span> <span class="pl-c1">to</span>: <span class="pl-s">'/search'</span><span class="pl-kos">,</span> <span class="pl-c1">matcher</span>: <span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-s">'/search/:hash'</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c">// ...</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span>

<span class="pl-c">// ...</span>
<span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">prepare</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-en">createServer</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</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">parsedUrl</span> <span class="pl-c1">=</span> <span class="pl-en">parse</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> pathname<span class="pl-kos">,</span> query <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">parsedUrl</span><span class="pl-kos">;</span>
    <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">r</span> <span class="pl-k">of</span> <span class="pl-s1">routes</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">params</span> <span class="pl-c1">=</span> <span class="pl-s1">r</span><span class="pl-kos">.</span><span class="pl-en">matcher</span><span class="pl-kos">(</span><span class="pl-s1">pathname</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-s1">params</span> <span class="pl-c1">!==</span> <span class="pl-c1">false</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s1">r</span><span class="pl-kos">.</span><span class="pl-c1">to</span><span class="pl-kos">,</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">assign</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">params</span><span class="pl-kos">,</span> <span class="pl-s1">query</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
    <span class="pl-en">handle</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s1">parsedUrl</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">To me, it seems like this shouldn't be doing a full page reload when I submit my form, since I'm using <code class="notranslate">import Router from 'next/router';</code> and the <code class="notranslate">Router.push</code> method.</p>
<p dir="auto">I should mention that the page with the form is <code class="notranslate">/search</code>, and the form should take you to <code class="notranslate">/search/magicHashFromForm</code>.</p>

<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Page shouldn't do a full page reload.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Page unmounts all components, and reloads the page.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">I'm aiming for restful routes, so it's not uncomm</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>8.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>OSX 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 64.0.3282.186</td>
</tr>
</tbody>
</table>