Pierwsze kroki

Instalacja pakietu, import w pliku middleware i pierwsza mapa tras - droga od pustego pliku do działającego łańcucha w kilka minut.

Instalacja i pierwsze uruchomienie

Zainstaluj pakiet

npm install @zanreal/nemo

Zaimportuj pakiet w pliku middleware

W Next.js 16 ten plik nazywa się proxy.ts, we wcześniejszych wersjach middleware.ts. Jeśli jeszcze go nie masz, załóż go w katalogu głównym projektu.

proxy.ts
import { createNEMO } from '@zanreal/nemo';  

// [...]
middleware.ts
import { createNEMO } from '@zanreal/nemo';  

// [...]

Utwórz handler funkcją createNEMO

Na razie bez argumentów - konfigurację dołożysz w kolejnym kroku.

proxy.ts
import { createNEMO } from '@zanreal/nemo';

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

// [...]
middleware.ts
import { createNEMO } from '@zanreal/nemo';

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

// [...]

Opisz mapę middleware i przekaż ją do createNEMO

proxy.ts
import { createNEMO, type MiddlewareConfig } from '@zanreal/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 '@zanreal/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); 

// [...]

Od tej chwili każde żądanie do aplikacji zostawia w konsoli wpis There is NEMO.

Konfiguracja

Z czego składa się mapa middleware

Funkcje

Jak wygląda pojedyncza funkcja middleware

Zawęź matcher, żeby middleware nie uruchamiał się przy każdym żądaniu

proxy.ts
// [...]

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

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

Taki wzorzec pomija cztery grupy ścieżek:

  1. /_next/ - wewnętrzne zasoby Next.js
  2. /_static - zawartość katalogu /public
  3. /_vercel - wewnętrzne zasoby Vercela
  4. pliki z rozszerzeniem, czyli /favicon.ico, /sitemap.xml, /robots.txt i podobne

Wszystkie warianty matcher opisuje dokumentacja Next.js

Złóż wszystko w całość

proxy.ts
import { createNEMO, type MiddlewareConfig } from '@zanreal/nemo';

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

export const proxy = createNEMO(middlewares);

export const config = {
  matcher: ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'],
};
middleware.ts
import { createNEMO, type MiddlewareConfig } from '@zanreal/nemo';

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

export const middleware = createNEMO(middlewares);

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

Tak wygląda gotowy plik po wszystkich krokach.

Skąd wzięło się NEMO

Z Next.js pracuję od kilku lat. Kiedy Vercel zwinął pliki /**/_middleware.ts do jednego /middleware.ts w katalogu głównym, zniknął wygodny sposób trzymania logiki blisko tras, których dotyczy. Miało to być rozwiązanie tymczasowe. Na retrospektywie w 2023 roku doszedłem do wniosku, że nikt tej luki nie załatał, więc wziąłem się za to sam.

Zostawiam tę historię tutaj, bo warto pamiętać, od czego się zaczęło. Liczę na to, że NEMO oszczędzi Ci trochę czasu i poprawi DX w Twoim projekcie.

Czy ta strona była pomocna?

M↓obsługiwane.

Spis treści

Instalacja i pierwsze uruchomienieZainstaluj pakietZaimportuj pakiet w pliku middlewareUtwórz handler funkcją createNEMOOpisz mapę middleware i przekaż ją do createNEMOZawęź matcher, żeby middleware nie uruchamiał się przy każdym żądaniuZłóż wszystko w całośćSkąd wzięło się NEMO