<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">Router.beforePopState should be easy to set. The code should reside in pages/_app.js with client-side only guard since it should be run on client only once.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">I put up an example repository <a href="https://gitlab.com/peacefullybound/next-js-custom-routing-test" rel="nofollow">here</a>.</p>
<p dir="auto">Server-side went ok without an error, but browsers complain with the following.</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.

Error: No router instance found.
You should only use &quot;next/router&quot; inside the client side of your app.

    at throwIfNoRouter (http://localhost:3000/_next/static/commons/main.js:7835:11)
    at Object.SingletonRouter.(anonymous function) [as beforePopState] (http://localhost:3000/_next/static/commons/main.js:7799:5)
    at Object.&lt;anonymous&gt; (http://localhost:3000/_next/-/page/_app.js:2819:55)
    at Object../pages/_app.js (http://localhost:3000/_next/-/page/_app.js:2955:30)
    at __webpack_require__ (http://localhost:3000/_next/static/commons/manifest.js:715:31)
    at fn (http://localhost:3000/_next/static/commons/manifest.js:118:20)
    at Object.1 (http://localhost:3000/_next/-/page/_app.js:2962:18)
    at __webpack_require__ (http://localhost:3000/_next/static/commons/manifest.js:715:31)
    at webpackJsonpCallback (http://localhost:3000/_next/static/commons/manifest.js:26:23)
    at http://localhost:3000/_next/-/page/_app.js:5:7"><pre class="notranslate"><code class="notranslate">No router instance found.
You should only use "next/router" inside the client side of your app.

Error: No router instance found.
You should only use "next/router" inside the client side of your app.

    at throwIfNoRouter (http://localhost:3000/_next/static/commons/main.js:7835:11)
    at Object.SingletonRouter.(anonymous function) [as beforePopState] (http://localhost:3000/_next/static/commons/main.js:7799:5)
    at Object.&lt;anonymous&gt; (http://localhost:3000/_next/-/page/_app.js:2819:55)
    at Object../pages/_app.js (http://localhost:3000/_next/-/page/_app.js:2955:30)
    at __webpack_require__ (http://localhost:3000/_next/static/commons/manifest.js:715:31)
    at fn (http://localhost:3000/_next/static/commons/manifest.js:118:20)
    at Object.1 (http://localhost:3000/_next/-/page/_app.js:2962:18)
    at __webpack_require__ (http://localhost:3000/_next/static/commons/manifest.js:715:31)
    at webpackJsonpCallback (http://localhost:3000/_next/static/commons/manifest.js:26:23)
    at http://localhost:3000/_next/-/page/_app.js:5:7
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://gitlab.com/peacefullybound/next-js-custom-routing-test" rel="nofollow">Example repository</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">See "Expected Behavior" above.</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>6.0.0</td>
</tr>
<tr>
<td>node</td>
<td>10.0.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS High Sierra 10.13.4</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome 66.0.3359.139</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<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>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="pages/
  components/
    component.js
  index.js
  catalog.js
  about.js"><pre class="notranslate"><code class="notranslate">pages/
  components/
    component.js
  index.js
  catalog.js
  about.js
</code></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const listOfPages = await getListOfPages()
console.log(listOfPages)
// [ 'index', 'catalog', 'about' ]"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">listOfPages</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-en">getListOfPages</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">listOfPages</span><span class="pl-kos">)</span>
<span class="pl-c">// [ 'index', 'catalog', 'about' ]</span></pre></div>
<p dir="auto">Is it possible to implement such a thing?</p>