Revision history [back]

Middleware redirection can be achieved in Next.js version 13 with the AppDir set to true by creating a custom _app.js file and using the getInitialProps method to redirect the user to the desired page.

Here's an example of how to achieve this:

1. Create a custom _app.js file in the pages directory if it's not already there.

2. Import the AppProps type from next/app:

import { AppProps } from 'next/app';

1. Define the App function and add a getInitialProps method that checks if the user is authenticated and redirects to a login page if they are not:

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async (appContext) => {
  const { ctx } = appContext;

  const isAuthenticated = checkAuthentication(ctx);

  if (!isAuthenticated) {
    if (ctx.req) {
      ctx.res.writeHead(302, { Location: '/login' });
      ctx.res.end();
    } else {
      Router.push('/login');
    }
  }

  let pageProps = {};

  if (typeof Component.getInitialProps === 'function') {
    pageProps = await Component.getInitialProps(appContext);
  }

  return { pageProps };
};

1. Replace the default App component with the custom MyApp component in the _app.js file:

export default MyApp;

1. Create a checkAuthentication function that checks the user's authentication status:

function checkAuthentication(ctx: NextPageContext) {
  // Check authentication status here
  return false;
}

In this example, the checkAuthentication function returns false if the user is not authenticated. If the user is not authenticated, the getInitialProps method redirects them to the login page. If the user is authenticated, the getInitialProps method returns the pageProps object.

Note that this example assumes that the login page is located at /login. You may need to adjust the Location header in the getInitialProps method to match the location of your login page.