next.js server side rendering 디버깅

SSR에서 에러 발생시 문제

위 에러와 같이 Next.js Server Side 에서 렌더링 에러가 발생시 에러메시지가 원인은 구체적으로 알려주지 않는 경우가 많습니다. Next.js 공식문서 에서는 launch.json 설정과 디버거를 이용한 디버깅 가이드를 제공하고 있습니다.

Next.js 에서 제공하는 Debugging 문서

Next.js 디버깅 가이드

1. launch.json 파일을 생성하고 프로젝트 루트 디렉터리에 위치하도록 합니다.

// launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

2. vscode 폴더위치를 Next.js 루트 디렉토리로 위치시킵니다.
3. 디버깅할 곳에 중단점을 설정합니다.
4. F5를 눌러 디버거를 실행시킵니다.
5. 에러메시지를 파악하고 디버깅 합니다.

참고

• How to debug server side rendering function in vscode