Next.js에서 middleware.ts 사용 시 주의사항 (tsconfig.json 설정)

 

 

Middleware

middleware는 특정 상황이 발생하기 전에 요청을 가로채어 미리 실행되는 코드라고 쉽게 생각하면 된다.

이를 통해 인증된 사용자만 접근하도록 하거나 특정 조건을 만족하지 않을 경우 리디렉션하는 등 사전에 문제를 방지하는 역할을 한다.

 

 

 

🤦‍♂️ 문제 발생

이번 프로젝트에서는 로그인 인증 상태에 따라 private route 처리를 하기 위해 `middleware`를 사용하기로 했다.

돌아가는 로직은 이래와 같다.

1. middleware는 요청을 가로채어 인증 상태를 확인
2. 사용자에게 접근 권한이 있는지 판단
3. 권한이 없는 경우(인증X) 로그인 페이지로 이동

 

이렇게 인증이 되지 않은 사용자가 보호된 페이지에 접근하는 것을 미리 방지하도록 구성했다.

하지만 아무리 로그인을 하지 않아도 mypage 버튼을 누르면 "/mypage" 로 이동이 되는 것이다..

 

참고로 간단하게 생각해서

삼항연산자로 로그인 정보가 없으면 mypage를 안보이게 하라고 할 수 있지만 url로 접근하면 들어가지기 때문에 지양해야했다.

 

 

 

💡 해결

 

계속해서 내용을 찾아보니..

Next.js 12 이상에서는 `middleware.ts` 파일을 TypeScript 프로젝트에서 사용할 때는 `tsconfig.json` 설정에 주의가 필요하다고 한다.

기본적으로 tsconfig.json 파일의 `include` 옵션은 TypeScript 컴파일러가 어떤 파일을 인식할지 결정한다.

 

만약 middleware.ts가 인식되지 않는다면,

include 배열에 "middleware.ts"를 직접 추가해야 한다. 이렇게 설정하면 컴파일러가 이 파일을 처리할 수 있게 된다 .

 

// tscongif.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "middleware.ts"],  // 여기 추가
  "exclude": ["node_modules"]
}