Next.js equivalent to Navigation Guards (Vue)?

Question

Basically I'm trying to intercept each route before it's served. Say user navigates to /login, I want to redirect to /en/login. If /en/login doesn't exist, then 404.

The current approach is to have a folder structure like this:

src
|-- pages
    |-- login.tsx (redirects to /[locale]/login)
    |-- index.tsx (redirects to /[locale]/index)
    |-- [locale]
        |-- login.tsx
        |-- index.tsx

It works, but the contents of pages/login.tsx and pages/index.tsx are essentially the same:

import LanguageRedirectHelper from 'mobile-capacitor/mobile-helper/language-redirect-helper'
import { NextPage } from 'next'
import React from 'react'

const IndexPage: NextPage = () => {
  return <LanguageRedirectHelper />
}

export default IndexPage

It's redundant. So I'm trying to do it like in Vue:

router.beforeEach((to, from) => {
  // redirect
})

But I'm failing to see how and where to do this.