<p dir="auto">I am building a blog with Next.js. I need my contact page to include a contact form so visitors can send emails via Nodemailer.</p>
<p dir="auto">I am fairly new to Express so I feel in a little over my head. Should I be customizing the Next.js server?</p>
<p dir="auto">Or should I make a separate server? If so, is that completely separate from my Next.js app?</p>
<p dir="auto">I currently have pages/contact rendering a form. I am not worried about actually sending the email and all that Nodemailer stuff. I just don't understand where I should be hooking up my configurations.</p>
<p dir="auto">What would be the recommended way to do implement such a contact form?</p>
<p dir="auto">Any help greatly appreciated. Thank you!</p>
<ul dir="auto">
<li>[x ] 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>
<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"><a href="https://github.com/zeit/next.js#imperatively-1">document</a> says:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Router from 'next/router'
export default ({ url }) =&gt; (
  &lt;div&gt;
    &lt;a onClick={ () =&gt; setTimeout(() =&gt; url.pushTo('/dynamic'), 100) }&gt;
      A route transition will happen after 100ms
    &lt;/a&gt;
    {
      // but we can prefetch it!
      Router.prefetch('/dynamic')
    }
  &lt;/div&gt;
)"><pre class="notranslate"><code class="notranslate">import Router from 'next/router'
export default ({ url }) =&gt; (
  &lt;div&gt;
    &lt;a onClick={ () =&gt; setTimeout(() =&gt; url.pushTo('/dynamic'), 100) }&gt;
      A route transition will happen after 100ms
    &lt;/a&gt;
    {
      // but we can prefetch it!
      Router.prefetch('/dynamic')
    }
  &lt;/div&gt;
)
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">While use <code class="notranslate">Router.prefetch('/foo')</code> in <code class="notranslate">render()</code> would got an error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="No router instance found. You should only use &quot;next/router&quot; inside the client side of your app."><pre class="notranslate"><code class="notranslate">No router instance found. You should only use "next/router" inside the client side of your app.
</code></pre></div>
<h2 dir="auto">Alternative Usage</h2>
<p dir="auto">Use it in <code class="notranslate">componentDidMount</code> works as expected:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  componentDidMount () {
    Router.prefetch('/foo')
  }"><pre class="notranslate"><code class="notranslate">  componentDidMount () {
    Router.prefetch('/foo')
  }
</code></pre></div>
<p dir="auto">Is it a bug or the document needs update?</p>