Next.js 오픈소스 예시코드를 13.3버전으로 마이그레이션 하기

Next.js·2023-09-02

📝

현재는 문서에 GA, GTM 작성 예시를 볼 수 있습니다! (목차에는 포함되어있지 않습니다!) 🔗 Next Script for Google Analytics

문제 상황

Next.js 13.3 버전에서 Google Analytics, Google Tage Manager, MetaPixel, Hotjar, Channel.io 등의 툴을 도입하는 레퍼런스가 없던 상황

(구현 시점 2023.5.14)

해결 과정

오픈소스에서 예시 코드 찾은 후 13.3 버전으로 마이그레이션했습니다.

nextjs/examples [github]vercel-nextjs/examples/with-google-analytics

✔️ 개선이 필요한 것들

pages 폴더 마이그레이션 필요 - Migrating Pages

Head 컴포넌트 마이그레이션 필요 - Migrating next/head

useRouter를 이용한 페이지 이동 감지 코드 마이그레이션 필요 - Router Events

useEffect를 클라이언트 컴포넌트로 분리할 필요

script, Script 둘 다 쓰고 있어서 Script로 통일

dangerouslySetInnerHTML은 사용하고 싶지 않다..

개선한 코드

code

components/script/google-analytics.tsx

app/layout.tsx

성취 🎉

위의 여섯가지 수정사항을 모두 완료했다!

설치 확인 플러그인을 통해 모두 정상 작동하는 것을 확인했다!

수정하며 배운 점을 토대로 GTM, MetaPixel, Hotjar, Channel.io에도 적용하여 2틀 동안 모든 툴을 도입했다!

구글링 없이도 에러 로그를 잘 읽어 문제를 해결했다!

어려웠던 점

뚝딱 완성한 것은 아니고 코드를 여기저기 배치하면서 여러 에러를 봤다. 새로운 버전은 구현 코드 레퍼런스도 많이 없지만 에러 메세지의 레퍼런스도 없다는 것을 깨달았다. 오히려 좋았던 점은 무작정 구글링하는 것이 아닌 에러코드를 찬찬히 뜯어보는 연습을 할 수 있었고 nextjs의 에러 설명이 참 친절하다는 것이다. 그리고 해결방법 링크도 주는데 그게 도움이 가장 많이 되었다!

배운 점

nextjs의 공식 문서 뿐만 아니라 오픈소스를 읽어보는 계기가 되었다.

오픈소스에는 복잡한 내부 구현 사항들이 가득할 것 같아서 지레 겁을 먹었는데 내가 읽을 수 있는 수준의 코드들도 있다는 걸 깨달았다.

커밋로그와 pr을 읽어보니 소식을 접하기도 좋고 어떤 문제, 요구 사항들이 생기고 있는지 알 수 있는 것은 뜻밖의 재밌는 수확이었다.

예시나 문서 작업 수정을 통한 오픈 소스 기여도 많이 하고 있다는 것을 깨달았다.

아쉬운 점

이 코드가 정말 괜찮은 코드일까 확신이 서지 않는다는 점이다. 이런 공통적으로 많이 사용되는 경우를 구현할 때는 최대한 안정적인 코드를 참고하는 편이었는데 직접 작성한 코드다 보니 ‘예상치 못한 에러가 발생하는 건 아닐까..?’, ‘다른 사람들이 봤을 때 너무 기본적인 실수를 하지 않았을까’하는 실체없는 걱정이 되었다. 함께하는 프론트 동료가 있으면 좋겠다는 생각을 다시 하게되었다.🥹