[Next13] Next12에서 Next13으로 넘어가기

2023년 5월 4일, Next.js 13.4 버전을 출시하면서 app router가 beta -> stable로 변경되었다. stable로 변경되면서 회사에서도 기존에 사용하던 Next12 버전에서 13으로 마이그레이션하기로 결정되었다. 가장 큰 이유는 역시 성능이었는데, Next12 버전의 경우 프로젝트의 크기가 작을 때는 빠르지만, 프로젝트의 규모가 커질수록 app.js가 무한히 켜지면서 첫 렌더링이 느려지고 hydration 시간이 길어지면서 lighthouse 점수가 떨어지게 되기 때문이다. 그래서 현재 회사 서비스도 성능 최적화를 할 수 있는 부분에서 거의 했음에도 불구하고 Mobile 기준 lighthouse 점수가 60~70점대로 알고 있다. 하지만 Next13에서 지원하는 server / client component 컨셉을 제대로 활용하면 같은 서비스 프로젝트임에도 Mobile 기준 lighthouse 점수를 쉽게 90점대로 유지할 수 있다.

이렇게 제대로만 쓰면 성능 최적화에 큰 이점이 있는데, stable된지 얼마 되지 않아 Next13과 관련된 자료를 찾기가 너무 어렵고 그래서 나도 거의 공식문서를 몇번이고 돌려 읽으면서 ‘이게 맞나…’라는 생각으로 진행하고 있지만, 그래도 다른 누군가에게는 내 삽질이 조금이나마 도움이 됐으면 하는 바람과 혹시라도 잘못 알고 있는 내용이 있다면 알고 제대로 알고 싶은 마음 반반으로 Next13으로 마이그레이션 하는 과정을 적어나가볼까 한다.

이 시리즈는 계속 작성 중 입니다!