Next.js에서 대응이 되어 있지 않은 `/` path로 진입했을 때 default `/home` page로 redirect 하는 스펙을 구현해야 한다. Redirect 시 사용하는 상태코드 Next.js에서의 redirect 를 구현하기 전 redirect 시에 서버에서 반환하는 상태코드를 먼저 살펴보자. 300번 대의 상태코드는 모두 Redirection 을 의미하며, 300 ~ 308 까지 있다. 301 (Moved Permanently) : 클라이언트의 요청 메소드를 GET 으로 바꾸며, redirect 처리가 캐싱된다. 302 (Found - Moved Temporarily) : 클라이언트의 요청 메소드를 GET 으로 바꾸며, redirect 처리가 일시적이고 캐싱되지 않는다. 304 (Not..

오늘은 Next JS에서 Client Data fetching 사용 시 마주할 수 있는 Anchoring 이슈에 대해 정리하려 합니다. Next JS docs에서 권장하고 있는 코드 스타일을 적용했을 때 생길 수 있는 이슈이기 때문에, 관련 이슈가 생겼을 때 저는 디버깅에 시간을 꽤나 썼습니다. 먼저 Next JS의 Data fetching에 대한 지식이 전무할 분들을 위해 개념부터 정리하고 이슈에 대한 해결 과정을 차례로 적어보겠습니다. Data fetching Next JS를 이용한 Data fetching에는 다음과 같은 방법을 사용할 수 있습니다. 자세한 내용은 공식 문서를 참조해주세요! getStaticProps / getServerSideProps : Server Side에서 미리 page h..

문제 상황 next/link를 사용한 GNB의 mouseEnter event가 작동하지 않아서 메인 메뉴에 마우스를 움직여도 subMenu가 바뀌지 않는 이슈가 발생한다. 원인 GNB에서 사용하는 LinkContext의 SuperLink를 next/link로 처리했는데, next 12 version에서 mouseHover 이벤트가 제대로 작동하지 않는 문제가 있다. fix(Link): Do not ignore onMouseEnter prop with absolute href by ericmatthys · Pull Request #32012 · vercel/next.js Fixes #22733 Regardless of whether it's recommended that Link be used with e..