Getting started

Installation & usage

Paste installation command into your terminal to install package.

npm install @rescale/nemo

Import the package inside your middleware/proxy file.

(or create it if you don't have one yet)

proxy.ts

import { createNEMO } from '@rescale/nemo';  

// [...]

middleware.ts

import { createNEMO } from '@rescale/nemo';  

// [...]

Use the createNEMO function to create a middleware helper.

proxy.ts

import { createNEMO } from '@rescale/nemo';

export const proxy = createNEMO(/* your functions will go here */); 

// [...]

middleware.ts

import { createNEMO } from '@rescale/nemo';

export const middleware = createNEMO(/* your functions will go here */); 

// [...]

Define your middlewares config and update the createNEMO function parameters.

proxy.ts

import { createNEMO, type MiddlewareConfig } from '@rescale/nemo'; 

const middlewares: MiddlewareConfig = { 
  '/': [ 
    async (request) => { 
      console.log('There is NEMO', request.nextUrl.pathname); 
    }, 
  ], 
}; 

export const proxy = createNEMO(/* your functions will go here */); 
export const proxy = createNEMO(middlewares); 

// [...]

middleware.ts

import { createNEMO, type MiddlewareConfig } from '@rescale/nemo'; 

const middlewares: MiddlewareConfig = { 
  '/': [ 
    async (request) => { 
      console.log('There is NEMO', request.nextUrl.pathname); 
    }, 
  ], 
}; 

export const middleware = createNEMO(/* your functions will go here */); 
export const middleware = createNEMO(middlewares); 

// [...]

After that step, you should see an There is NEMO message in your console for every request made to your application.

Configuration

Learn more about middlewres configuration

Optimize your middleware execution to not execute it on every single request.

proxy.ts

// [...]

export const config = { 
  matcher: ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'], 
};

middleware.ts

// [...]

export const config = { 
  matcher: ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'], 
};

That will prevent your middleware from executing on routes:

/_next/ (Next.js internals)
/_static (inside /public)
/_vercel (Vercel internals)
Static files (e.g. /favicon.ico, /sitemap.xml, /robots.txt, etc.)

Reed more about Next.js middleware configuration

Finally, let's put it all together.

proxy.ts

import { , type  } from '@rescale/nemo';

const  = {
  '/': [
    async () => {
      .('There is NEMO', ..);
    },
  ],
} satisfies ;

export const  = ();

export const  = {
  : ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'],
};

middleware.ts

import { , type  } from '@rescale/nemo';

const  = {
  '/': [
    async () => {
      .('There is NEMO', ..);
    },
  ],
} satisfies ;

export const  = ();

export const  = {
  : ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'],
};

That's how your file should look after all steps.

I'm working with Next.js project for a few years now, after Vercel moved multiple /**/_middleware.ts files to a single /middleware.ts file, there was a unfilled gap - but just for now. After a 2023 retro I had found that there is no good solution for that problem, so I took matters into my own hands. I wanted to share that motivation with everyone here, as I think that we all need to remember how it all started.

Hope it will save you some time and would make your project DX better!

Getting started

Installation & usage

Paste installation command into your terminal to install package.

Import the package inside your middleware/proxy file.

Use the createNEMO function to create a middleware helper.

Define your middlewares config and update the createNEMO function parameters.

Configuration

Functions

Optimize your middleware execution to not execute it on every single request.

Finally, let's put it all together.

Motivation

On this page