title: Next.js equivalent to Navigation Guards (Vue)?
body: <p>Basically I'm trying to intercept each route before it's served.
  Say user navigates to <code>/login</code>, I want to redirect to <code>/en/login</code>.
  If <code>/en/login</code> doesn't exist, then 404.</p>
  <p>The current approach is to have a folder structure like this:</p>
  <pre><code>src
  |-- pages
      |-- login.tsx (redirects to /[locale]/login)
      |-- index.tsx (redirects to /[locale]/index)
      |-- [locale]
          |-- login.tsx
          |-- index.tsx
  </code></pre>
  <p>It works, but the contents of pages/login.tsx and pages/index.tsx are essentially the same:</p>
  <pre><code>import LanguageRedirectHelper from 'mobile-capacitor/mobile-helper/language-redirect-helper'
  import { NextPage } from 'next'
  import React from 'react'
  
  const IndexPage: NextPage = () =&gt; {
    return &lt;LanguageRedirectHelper /&gt;
  }
  
  export default IndexPage
  </code></pre>
  <p>It's redundant. So I'm trying to do it like in Vue:</p>
  <pre><code>router.beforeEach((to, from) =&gt; {
    // redirect
  })
  </code></pre>
  <p>But I'm failing to see how and where to do this.</p>