NEXTJS_NO_CLIENT_DEPS_IN_MIDDLEWARE

This check disallows dependencies on client libraries, such as react and next/router in Next.js middleware. Since middleware runs on the server and runs on every request, this code is not able to run any client side code and it should have a small bundle size to improve loading and execution times.

An example of when this check could manifest is when middleware transitively depends on a file that also uses react within the same file.

For example:

import { createContext, type Context } from 'react';
 
export function createExperimentContext(): Context<ExperimentContext> {
  return createContext<ExperimentContext>({
    experiments: () => {
      return EXPERIMENT_DEFAULTS;
    },
  });
}
 
export async function getExperiments() {
  return activeExperiments;
}

export async function middleware(
  request: NextRequest,
  event: NextFetchEvent,
): Promise<Response> {
  const experiments = await getExperiments();
 
  if (experiments.includes('new-marketing-page)) {
    return NextResponse.rewrite(MARKETING_PAGE_URL);
  }
  return NextResponse.next();
}

In this example, the experiments.ts file both fetches the active experiments as well as provides helper functions to use experiments on the client in React.

Client dependencies used or transitively depended on by middleware files should be refactored to avoid depending on the client libraries. In the example above, the code that is used by middleware to fetch experiments should be moved to a separate file from the code that provides the React functionality.