Make next/router a client only API.

Author: arunoda

examples/using-router/components/Header.js

@@ -25,8 +25,5 @@ export default () => (
     <Link href='/'>Home</Link>
     <Link href='/about'>About</Link>
     <Link href='/error'>Error</Link>
-    <div>
-      <small>Now you are in the route: {Router.route} </small>
-    </div>
   </div>
 )

lib/router/index.js

@@ -6,7 +6,7 @@ let router = null
 const SingletonRouter = {}
 
 // Create public properties and methods of the router in the SingletonRouter
-const propertyFields = ['route', 'components', 'pathname', 'query']
+const propertyFields = ['components', 'pathname', 'route', 'query']
 const methodFields = ['push', 'replace', 'reload', 'back']
 
 propertyFields.forEach((field) => {
@@ -32,7 +32,7 @@ methodFields.forEach((field) => {
 function throwIfNoRouter () {
   if (!router) {
     const message = 'No router instance found.\n' +
-      'If you are using "next/router" inside "getInitialProps", avoid it.\n'
+      'You should only use "next/router" inside the client side of your app.\n'
     throw new Error(message)
   }
 }
@@ -52,17 +52,5 @@ export const createRouter = function (...args) {
   return router
 }
 
-// This helper is used to assign a router instance only when running the "cb"
-// This is useful for assigning a router instance when we do SSR.
-export const withRouter = function (r, cb) {
-  const original = router
-  router = r
-  const result = cb()
-
-  router = original
-  return result
-}
-
-// Export the actual Router class, which is also use internally
-// You'll ever need to access this directly
+// Export the actual Router class, which is usually used inside the server
 export const Router = _Router

server/render.js

@@ -3,7 +3,7 @@ import { createElement } from 'react'
 import { renderToString, renderToStaticMarkup } from 'react-dom/server'
 import requireModule from './require'
 import read from './read'
-import { Router, withRouter } from '../lib/router'
+import { Router } from '../lib/router'
 import Head, { defaultHead } from '../lib/head'
 import App from '../lib/app'
 
@@ -56,16 +56,13 @@ async function doRender (req, res, pathname, query, {
   if (res.finished) return
 
   const renderPage = () => {
-    const router = new Router(pathname, query)
     const app = createElement(App, {
       Component,
       props,
-      router
+      router: new Router(pathname, query)
     })
 
-    const html = withRouter(router, () => {
-      return (staticMarkup ? renderToStaticMarkup : renderToString)(app)
-    })
+    const html = (staticMarkup ? renderToStaticMarkup : renderToString)(app)
     const head = Head.rewind() || defaultHead()
     return { html, head }
   }