nextjs redirect page in 404 page with pathname constraint

Question

I want to restrict users to be directed to pages created in the /pages/ path because for example if the user is directed to http://localhost:3000/navbar that will is ugly but i have created the file /pages/navbar.tsx so my problem is i want to redirect it to a 404 page.

I found out that I have to use next-redirects but I don't know how it works.

Basically this is the code.

import '@/styles/globals.css'
import '@/styles/auth.scss'
import type { AppProps } from 'next/app'
import { Provider } from 'react-redux';
// import accountSlice from '@/pages/features/Authentication';
import { store } from '@/features/Authentication';
import { AccountProvider } from '@/components/context/Account';
import { useEffect } from 'react';
import { Redirects } from 'next-redirects';

export default function App({ Component, pageProps }: AppProps) {

  useEffect(() => {
    if (window.location.pathname === '/navbar') {
      Redirects('/', { statusCode: 404 });
    }
  }, []);
  

  return <>
    <AccountProvider>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </AccountProvider>
  </>
}

I followed the chatgpt instructions but the code seems to be outdated. Does anyone care to help me how to redirect this to a 404 page? Thanks.

Answer 1

Ops, I'm sorry, I just passed the navbar.tsx from pages into components/navbar.tsx so it gets the error.