Javascript – how can i detect if it's a 404 page in Next.js 13

Next.js and Error Handling

In Next.js the built-in Error page component, _error.js or _error.tsx located in the /pages directory, handles all error codes, including 404. However, it doesn’t directly provide a mechanism for checking if the current page is a 404 from another component.

A possible solution to your problem is to set a state within your root component layout.tsx that’s altered whenever the Error page component is triggered. You can achieve this via React context or a state management library of your choice.

So lets go on with my approach:

First we need to construct a context. I have created a NotFoundContext for this case.

The Code:

// Import the necessary React hooks
import { createContext, useContext, useState } from 'react';

// Define our NotFoundContext context
const NotFoundContext = createContext();

// Provide a Provider function that holds our state
export function NotFoundProvider({ children }) {
  // Define state variable to track 404 status
  const [isNotFound, setNotFound] = useState(false);

  // Use Provider to allow children components access to our 404 state
  return (
    <NotFoundContext.Provider value={{ isNotFound, setNotFound }}>
      {children}
    </NotFoundContext.Provider>
  );
}

// A hook for easy access to the NotFoundContext
export function useNotFound() {
  return useContext(NotFoundContext);
}

Now we need to wrap the application with NotFoundProvider that we have defined.

The Code:

// Import NotFoundProvider context
import { NotFoundProvider } from './NotFoundContext';

// Define your Application
function MyApp({ Component, pageProps }) {
  return (
    // Provide the NotFound context to the entire Application
    <NotFoundProvider>
      <Component {...pageProps} />
    </NotFoundProvider>
  );
}

export default MyApp;

We need to adjust _error.js or _error.tsx to reflect the isNotFound status. Just set isNotFound to true inside the js or tsx file.

The Code:

// Import useNotFound hook
import { useNotFound } from '../NotFoundContext';
import { useEffect } from 'react';

function Error({ statusCode }) {
  // Obtain our function for setting NotFound state
  const { setNotFound } = useNotFound();

  // Till component mount, check if statusCode is 404 and adjust NotFound state
  useEffect(() => {
    setNotFound(statusCode === 404);
  }, [statusCode]);

  // TODO: Rest of this component
}

// Get statusCode from server response or the error object itself
Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

Now with everything at its place isNotFound can be accessed and utilized within your own component.

The Code:

// Import our custom hook
import { useNotFound } from './NotFoundContext';
import { onAuthStateChanged } from 'firebase/auth';

// Other code

onAuthStateChanged(auth, (user) => {
  // Obtain our NotFound state value
  const { isNotFound } = useNotFound();
  
  if (user) { // User is logged in
    if (path === "/login") {
      router.push("/");
    }
  } else if (!isNotFound) { // User is not logged in and the page is not a 404 status
    if (path !== "/login") {
      router.push("/login");
    }
  }
});

I hope this helps you!