title: With NextJS and next-routes, How to Handle 404 from server.js and also client side
body: <p>I'm wanting my next-routes to gracefully handle file not found (really route not found) when running from server.js (server side) as well as running on the link side with Link.  I've got a solution but it's very bulkly and feels like I'm not doing it the best way I could.</p>
  
  <p>I'm pasting below my pages file (pages/speakerdetail.js) that does handle both server and client correctly but it seems wrong to have to have a custom render method in every file that says "Not Found".</p>
  
  <p>I've also got this running as in example in the repo</p>
  
  <p><a href="https://github.com/pkellner/next-routes-problem" rel="noreferrer">https://github.com/pkellner/next-routes-problem</a></p>
  
  <pre><code>import React, {Component} from 'react';
  import {Link} from '../routes'
  import Router from 'next/router'
  
  class speakerdetail extends Component {
  
      static async getInitialProps({req,res,query}) {
  
          console.log("getInitialProps speakerdetail");
          let statusCode = 200;
          let slugSpeaker = '';
          let ccYear = '';
          if (query &amp;&amp; query.slugSpeaker) {
              console.log("query.slugSpeaker:" + query.slugSpeaker);
              slugSpeaker = query.slugSpeaker;
          }
          if (query &amp;&amp; query.ccYear) {
              console.log("query.ccYear:" + query.ccYear);
              ccYear = query.ccYear;
          }
          if (slugSpeaker != 'douglas-crockford-1124' || ccYear != '2018') {
              if (req) {
                  console.log("getInitialProps - res.redirect cause server");
                  statusCode = 404;
                  res.statusCode = 404;
              } else {
                  console.log("getInitialProps - router.push cause client")
                  Router.push('/error404');
              }
          }
          return {
              slugSpeaker,
              ccYear,
              statusCode
          };
      }
  
      render() {
  
          if (this.props.statusCode == 404) {
              return (
                  &lt;div&gt;Not Found&lt;/div&gt;
              )
          }
  
          return (
              &lt;div&gt;
                  &lt;b&gt;speakerdetail    {this.props.ccYear}   {this.props.slugSpeaker}   {this.props.statusCode}&lt;/b&gt;
                  &lt;hr/&gt;
                  &lt;Link route='/' &gt;
                      &lt;a&gt;home&lt;/a&gt;
                  &lt;/Link&gt;
              &lt;/div&gt;
          );
      }
  }
  
  speakerdetail.propTypes = {};
  speakerdetail.defaultProps = {};
  
  export default speakerdetail;
  </code></pre>