오늘은 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..

요약 css 내부의 font asset을 받아오는 path를 절대경로가 아닌 상대경로로 바꾸면 된다. 문제 css에 url로 정의해 둔 font asset이 개발모드(dev)에서는 잘 적용되다가 실서버(production)에서 반영되지 않는 이슈 실제 구현 /* style.css */ @font-face { font-family: spoqaSansNeo; font-weight: 700; src:url('/font/SpoqaHanSansNeo-Bold.ttf'); src: url('/font/SpoqaHanSansNeo-Bold.otf') format("opentype"), url('/font/SpoqaHanSansNeo-Bold.ttf') format("truetype"); } /* next.config..

상황 next.js에서는 SSR을 사용하기 때문에 url에 있는 query를 받아올 수가 없다. 해결 1 next page에서 getServerSideProps 함수를 이용해 query를 받아올 수 있다. const Page: NextPage = ({ params }) => { } export async function getServerSideProps (context) { const req = context.req; const params = new URLSearchParams(req._parsedUrl.query); return { props: { params } }; }​ 해결 2 해결 1의 방법으로 page 내부에서는 url parameter를 사용할 수 있다. 하지만 _app.tsx와 같이 ne..