Next.js 가 실제로 사용하는 최종 config 확인하기

센트리 정상화 과정에서 next.config.js 의 설정한 config 값이 제대로 적용되는지를 확인하고 싶은 니즈가 있었다.
webstorm을 사용하다가 cursor로 갈아탄지 얼마 안된 상황에서 디버깅 환경에 익숙해지면 좋은 기능들이 많아 기록해두는게 좋겠다.
next.js의 module config 내부의 값을 확인해보는 방법은 다음과 같다.

1) 확인하고자 하는 앱의 next.config.js 의 debugger 추가하기

// apps/web-app/next.config.js
module.exports = async (phase, context) => { 
	let config = withBundleAnalyzer(nextConfig);
	config = await withNx(config)(phase, context);
	config = withSentryConfig(config); 
	debugger; // ---> 나의 경우 config return 직전에 추가하였다.
	return config; 
};

2) vscode(cursor) CMD + SHIFT + P > Debug: Toggle Auto Attach 값을 Always로 설정하기

3) 터미널을 껐다가 다시 켠다 (새로운 세션의 터미널을 연다)

4) next build를 해본다. 
내 프로젝트의 경우 pnpm nx run web-app:build:development 를 통해 확인하고자 하는 앱을 빌드했다.
이 과정에서 1)에서 추가했던 debugger에 잡히게 된다.
debugger로 step over 하다보면 Next.js 의 코드로 들어가게 되고 계속 더 깊게 들어가다보면 completeConfig 를 확인할 수 있다.

loadConfig 내부 return되는 completeConfig

cursor 화면 좌측에 debugger 화면에서도 현재 변수값을 통해 config를 확인할 수 있다. (혹은 debug console을 확인해도 된다.)

cursor debugger block

해당 과정을 통해 확인하고 싶었던 productionBrowserSourceMaps 값을 확인할 수 있었다.

프로젝트의 에러를 보고하고 관리하는 센트리를 정상화하는 과정에서 필요한 디버깅 과정이였고 센트리를 정상화한 과정은 별도로 정리를 해볼 예정이다.