title: Redirect to 404 when custom [slug] is not found in Next JS
body: <p>I'm surprised I can't find this anyway but here is my issue.
  I have a Next JS site with the path <code>/location/[location].js</code>
  The page looks pretty basic</p>
  <pre><code>import { nodes } from '../../components/data/nodes'
  
  export default function Location() {
      const router = useRouter()
  
      useEffect(() =&gt; {
           //Do various things   
      }, [])
     
      return (
          &lt;Layout&gt;
               ...My website...
          &lt;/Layout&gt;
      )
  }
  </code></pre>
  <p>and nodes looks like this</p>
  <pre><code>export const nodes = [
  {
      id: 'Test1'
  }, {
      id: 'Test2'
  }, {
      id: 'Test3'
  }]
  </code></pre>
  <p>So how can I say if my [location] slug does not match any node id's go to the 404 page? I tried some janky garbage that just feels wrong and throws console errors:</p>
  <pre><code>var counter = 1
    for (var node of nodes) {
      if (router.query.location == node.id) {
        break
      } else if (counter++ &gt;= nodes.length) {
        return &lt;Error statusCode={404} /&gt;
      }
    }
  </code></pre>
  <p>Can someone help me work this out. Thanks</p>