[🔧 fix] MSW 최초 렌더링 시 500 문제 해결

[goldegg127]

🚀 풀 리퀘스트 제안

📋 작업 내용

#135 이슈 해결

• next js에서 지원하는 instrumentation 파일의 register 함수를 사용
• register 함수는 서버 인스턴스가 시작될 때 한 번만 실행됩니다. 서버가 시작될 때 = 가장 빠른 시점에 msw 실행하면서 최적화

🔧 변경 사항

• src/instumentaion.ts 파일 생성 및 register 함수 내 msw 로직 적용

  export async function register() {
    if (process.env.NEXT_RUNTIME === 'nodejs') {
      const { server } = await import('./lib/msw/server');
      server.listen();
    }
  }

• layout.tsx 파일 내 즉시실행함수로 실행되는 msw 로직 삭제

  (async () => {
    const { initMsw } = await import('../lib/msw');
    await initMsw();
  })();

📸 스크린샷

수정된 화면 또는 기능을 시연할 수 있는 스크린샷을 첨부할 수 있습니다.

📄 기타

Instumentation

• https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation
• https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation
  • 한글 문서

msw 문제 해결 참고

• add next.js app router example mswjs/examples#101

[vgotu99]

진짜 신기하네요

[bbjbc]

갓멘토님 진짜.