Next.js 미들웨어 소개: 예제와 함께 작동하는 방법

Nextjs의 라우팅에 대해 이야기해 보겠습니다. 오늘은 가장 강력한 미들웨어 중 하나에 대해 이야기해보겠습니다. Nextjs의 미들웨어는 서버의 요청을 가로채고 요청 흐름(리디렉션, URL 재작성)을 제어하고 인증, 헤더, 쿠키 지속성과 같은 기능을 전체적으로 향상시키는 강력하고 유연한 방법을 제공합니다.

미들웨어 생성

미들웨어 Next.js 애플리케이션을 만들어 보겠습니다. 우선 src 폴더에 middleware.js나 middleware.ts 같은 미들웨어용 파일을 새로 생성하겠습니다. 그런 다음 Next.js의 미들웨어는 활성화될 위치(예: 사용자 지정 일치자 구성 또는 isXXX 기능 사용)를 미세하게 제어할 수 있어야 합니다.

리디렉션 중

리디렉션을 예로 들어 /profile로 이동하면 사용자가 홈페이지로 리디렉션되는 시나리오를 상상해 보겠습니다. 사용자 정의 일치자 구성 접근 방식을 사용하면 필요한 유형을 가져오고, 미들웨어 기능을 정의하고, 일치자 구성을 지정하여 이를 달성할 수 있습니다.

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

이 예에서는 미들웨어 기능이 요청 URL 경로가 /profile인지 확인하고 사용자를 홈페이지로 리디렉션합니다.

조건문 접근 방식의 경우 다음과 같이 코드를 수정할 수 있습니다.

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

이 경우 미들웨어는 요청 URL 경로를 확인하고 경로가 /profile이면 사용자를 /hello 경로로 리디렉션합니다.

Next.js의 미들웨어는 단순히 리디렉션을 처리하는 것 이상의 역할을 합니다. 또한 URL 재작성이 가능해 기존 URL 지원이나 SEO 최적화에 유용할 수 있습니다. 이전 예에서 리디렉션을 재작성으로 변경하면 브라우저의 URL은 동일하게 유지되지만(/profile) 응답 콘텐츠는 /hello 경로의 콘텐츠로 변경됩니다.

쿠키 사용

마지막으로 미들웨어에서 쿠키와 헤더의 사용을 살펴보겠습니다. 테마에 대한 사용자 기본 설정을 처리하고 모든 응답에 대한 사용자 정의 헤더를 추가하도록 미들웨어를 수정할 수 있습니다.

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

이 예에서는 먼저 사용자가 쿠키에 테마 기본 설정을 저장했는지 확인합니다. 그렇지 않은 경우 쿠키를 추가하여 테마를 '어두움'으로 설정합니다. 그런 다음 추가 정보를 전달하거나 디버깅 목적으로 유용할 수 있는 사용자 정의 헤더를 응답에 추가합니다.

보시다시피 Next.js의 미들웨어는 요청-응답 주기를 효과적으로 제어하고 차단하여 리디렉션, URL 재작성, 헤더 및 쿠키 조작을 가능하게 하는 강력한 도구입니다. 미들웨어를 마스터하면 Next.js 애플리케이션의 라우팅 경험을 향상하고 더욱 강력하고 사용자 정의 가능한 사용자 경험을 만들 수 있습니다.

"Next.js의 미들웨어는 애플리케이션 내의 요청 및 응답 흐름을 가로채고 제어하는 ​​강력한 방법을 제공하는 강력한 기능입니다." - Next.js 문서

결론

요약하자면 Next.js에서 미들웨어를 정의하는 방법, 두 가지 주요 접근 방식(사용자 지정 일치자 구성 및 조건문)을 살펴보고 미들웨어를 적용하여 리디렉션, URL 재작성, 쿠키 및 헤더 관리를 처리하는 방법을 배웠습니다. . 이러한 지식은 미들웨어가 제공하는 유연성과 제어 기능을 활용하여 Next.js 애플리케이션을 한 단계 더 발전시키는 데 도움이 됩니다.

위 내용은 Next.js 미들웨어 소개: 예제와 함께 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!