Next.js 14 Middleware를 활용한 로그인 페이지 리다이렉션 방법

Next.js

 

 

 

 

 

🤷‍♂️ 본론에 앞서 미들웨어 기본개념

---

• 미들웨어는 서버 측에서 요청을 처리하기 전에 실행되는 함수이며 미들웨어를 통해서 요청에대한 작업을 사전에 수행할수 있도록 돕습니다.
• 미들웨어 파일은 middleware.ts 또는 middleware.js 파일명으로 ./pages, ./app 폴더와 같은 계층에 위치해야됩니다.

 

Next.js 버전 마다 루트 경로에 /pages, /app 다를수 있지만 /pages, /app 폴더와 같은 계층에 미들웨어 파일을 위치시키면 됩니다.

미들웨어 파일명과 경로 규칙을 꼭 준수하셔야 미들웨어 함수가 동작합니다.

 

 

🤷‍♂️ Middleware.ts 사용법

---

미들웨어 사용방법

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// matcher에 매칭되는 경로로 접근하는 경우 middleware.ts 실행
export const config = {
  matcher: '/about/:path*',
}

 

matcher 설정

특정 경로 설정

export const config = {
  matcher: '/about/:path*',
}

 

배열 구문으로 여러 경로 설정

export const config = {
  matcher: ['/about/:path*', '/dashboard/:path*'],
}

 

matcher에 경로 설정으로 middleware를 사용할수 있습니다.

 

Next.js middleware 공식문서

https://nextjs.org/docs/app/building-your-application/routing/middleware

Routing: Middleware | Next.js

 

 

 

🤷‍♂️ Middleware를 활용한 로그인 페이지 리다이렉션 방법

---

실제 제가 운영중인 쇼핑몰 코드입니다.

 

Next.js의 middleware 함수에서 요청 헤더의 쿠키에 접근이 가능하며 token을 활용해서 로그인 여부를 판단하여 Redirection을 구현할 수 있습니다.

import { getToken } from 'next-auth/jwt';
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

// 미들웨어에서 사용될 secret 설정
const secret = process.env.AUTH_SECRET;

export async function middleware(req: NextRequest) {
  // 세션 토큰 확인 (JWT 사용)
  const token = await getToken({ req, secret });

  // 세션이 없으면 로그인 페이지로 리다이렉트
  if (!token) {
    const loginUrl = new URL('/login', req.url);
    return NextResponse.redirect(loginUrl);
  }

  // 세션이 있으면 요청을 정상 처리
  return NextResponse.next();
}

// 이 미들웨어가 적용될 경로 (보호된 경로 설정)
export const config = {
  matcher: [
    '/cart',
    '/cart/:path*',
    '/profile',
    '/profile/:path*',
    '/purchase-history',
    '/purchase-history/:path*',
    '/checkout',
    '/checkout/:path*'
  ] // 보호할 경로를 설정 (예: /protected/*)
};

 

token이 없으면 로그인한 유저가 아니기 때문에 로그인 페이지로 Redirection 시킵니다.

 

Middleware 사용하는 이유

• 성능 향상: 서버 측에서 요청을 미리 처리함으로써 클라이언트의 부하를 줄이고, 더 빠른 응답을 제공할 수 있습니다.
• 유연성: 다양한 조건에 따라 요청을 처리할 수 있어, 복잡한 비즈니스 로직을 쉽게 구현할 수 있습니다.
• 보안 강화: 인증 및 권한 관리를 통해 애플리케이션의 보안을 강화할 수 있습니다.

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리