Паняцце Middleware у NextJS

Middleware - гэта прамежкавае праграмнае забеспячэнне, якое дазваляе перахопліваць і кантраляваць запыты і адказы пры апрацоўцы маршрутаў.

Давайце разбярэмся як стварыць сваё Middleware. Спачатку ў карнявым каталогу праекта зробім файл middleware.js:

/src/
- /app/
  - middleware.js

Давайце пропiшем наступны сцэнар - хай пры пераходзе па адрасе /posts/ будзе ісці перанакіраванне на хатнюю старонку /.

Прыклад

Адкрываем файл middleware.js і імпартуем у яго NextResponse і тып NextRequest. Далей экспартуем функцыю middleware, якая будзе вяртаць перанакіраванне на адрас /. Таксама пропісваем экспарт аб'екта config, у якім для ключа matcher будзе пропісаны шлях, з якога будзе перанакіроўвацца запыт на хатнюю старонку:

import { NextResponse, type NextRequest } from "next/server";

export function middleware(request: NextRequest) {
	return NextResponse.redirect(new URL("/", request.url))
}

export const config = {
	matcher: "/posts",
};

Прыклад

Пры стварэнні middleware можна абысціся і без аб'екта config. Для гэтага трэба пропісаць умову ўнутры функцыі middleware. Калі шлях запыту эквівалентны /posts, то хай ён перанакіроўваецца на старонку /blog:

export function middleware(request: NextRequest) {
	if (request.nextUrl.pathname === "/posts") {
		return NextResponse.redirect(new URL("/blog", request.url))
	}
}

Практычныя задачы

Рэалізуйце middleware для перанакіравання адраса /about на /admin-panel. Вырашыце задачу, выкарыстоўваючы два спосабы, апісаныя ў уроку.