next.js 미들웨어

감사합니다.
app/[path1]/[path2]/[path3]/page.tsx 같은 동적 라우팅이 존재할 때 /images/favicon.png 접근 시 500 에러가 발생하는 이유는:

⸻

❗ 문제 원인 요약

Next.js 13 이상 (특히 app/ 디렉토리 사용 시)에서는:
• 모든 경로 요청은 우선적으로 라우트 매칭을 시도합니다.
• /images/favicon.png 요청 시, app/[path1]/[path2]/[path3]/page.tsx에서 해당 경로 패턴이 일치한다고 판단하면, 페이지를 렌더링하려 하다가 params가 예상과 달라 500 에러가 발생합니다.
• 정적 파일인데 페이지로 잘못 해석되어 발생하는 현상입니다.

⸻

✅ 해결 방법

1. ✅ matcher를 이용해 middleware.ts에서 static 파일을 제외

app/ 디렉토리에서는 middleware.ts 파일이 존재하면 모든 요청을 가로채는데, 이걸 통해 정적 자산 요청은 무시해야 합니다.

middleware.ts 예시:

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

export function middleware(req: NextRequest) {
  // 여기에 로그인 체크나 locale 처리 등 작성
  return NextResponse.next();
}

export const config = {
  matcher: [
    // 정적 자산 제외
    '/((?!_next/static|_next/image|favicon.ico|images/|icons/|fonts/).*)',
  ],
};

이 설정은 다음 요청을 제외합니다:
• /images/*
• /favicon.ico
• /_next/* (Next.js static assets)
• 그 외 기타 정적 자산들

🔧 matcher의 정규식은 정적 자산 경로를 모두 제외하도록 구성해야 합니다.

⸻

2. ✅ next.config.js에서 rewrite를 사용 중이라면 수정

// ❌ 다음은 정적 파일 요청도 라우트로 보내버림
rewrites: async () => [
  {
    source: '/:path*',
    destination: '/[path1]/[path2]/[path3]',
  },
],

위와 같은 설정은 /images/favicon.png도 동적 라우트로 보내므로 에러 발생.
✅ public/ 경로 제외 조건을 명시해야 합니다.

// ✅ 예시: 정적 파일 경로 제외
async rewrites() {
  return [
    {
      source: '/((?!images|_next|favicon.ico).*)',
      destination: '/[path1]/[path2]/[path3]',
    },
  ];
}


⸻

3. ✅ 동적 라우팅 컴포넌트 내에서 fallback 처리 (비추)

정적 파일 요청도 라우팅되기 때문에, 아래처럼 강제로 필터링할 수도 있지만 이는 우회책입니다:

export default function Page({ params }) {
  if (params?.path1 === 'images') {
    // 정적 파일 요청이 잘못 들어온 경우
    notFound(); // 또는 return null
  }

  return <div>정상 페이지</div>;
}

→ 가능하면 위의 matcher 또는 rewrites 방식으로 처리하는 것이 근본적인 해결입니다.

⸻

✅ 결론

해결 방법 설명
middleware.ts의 matcher 수정 정적 자산 요청 무시
next.config.js에서 rewrite 시 제외 설정 /images/* 요청이 라우트로 안 가도록 설정
app/images/ 라우트 제거 라우트로 오해할 여지를 없앰
라우트 컴포넌트에서 예외 처리 최후 수단 (권장하지 않음)


⸻

구체적인 디렉토리 구조나 next.config.js, middleware.ts를 보여주시면 더 최적화된 예시 드릴 수 있어요.
필요하시면 matcher 정규식도 구체적으로 구성해드릴게요.