Error: Unexpected token I in JSON at position 0  NextJS로 개발하실때 이런 에러 한번씩 뜨실겁니다.  이 에러에 대해서 처음 보시거나 모르시는분들은 프론트에서 문제를 찾으실겁니다. 막상 확인해보면 api 요청하는데 요청값이 잘못 들어가서 Backend server에서 에러가 나서 생긴 오류입니다. 저같은 경우도 아래의 에러 메세지 처럼 backend server에서 생긴 문제였습니다.

Next.js에서 useSearchParams() 사용 시 주의사항문제 상황다음과 같은 에러 메시지를 보신 적 있나요?useSearchParams() should be wrapped in a suspense boundary at page "/loginPage". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout 이 메시지는 "/loginPage"에서 useSearchParams()를 사용할 때 Suspense 경계로 감싸지 않아 발생하는 오류입니다. Suspense는 리액트 18버전에서 도입이 되었습니다. 다음 링크를 참조해주세요.-> https://ko.react.dev/reference/react/Suspense..

ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label) React 프로젝트에서 자주 마주치는 ESLint 오류 중 하나인 "A control must be associated with a text label.(jsx-a11y/control-has-associated-label)"에 대해 알아보고, 이를 해결하는 방법을 공유하려고 합니다.오류의 의미이 오류는 웹 접근성(Web Accessibility)과 관련이 있습니다. 간단히 말해, 사용자 인터페이스의 컨트롤(예: 버튼, 입력 필드)에 연관된 텍스트 레이블이 없을 때 발생합니다. 텍스트 레이블은 스크린 리더 사용자를 포함한 모든 사용자가 해..

NextJSnext.config.js에서 remotePatterns까지 셋팅해줬는데!!! Image 태그 src에 도메인주소를 넣으면 이미지가 안나오신다면 Loader를 사용하셔야 합니다! (Solution code)const src = `${API}/user/photo/${blog.postedBy.username}`; src} src={src} width={500} height={500}/> Next.js에서 이미지 로더(Loader) 이해하기Next.js에서 이미지 로더(Loader)가 어떻게 동작하는지에 대해 알아보겠습니다. 특히, 이미지 최적화와 관련된 부분을 중점적으로 다뤄보겠습니다.이미지 로더(Loader)란 무엇인가?Next.js에서 이미지 로더는 이미지의 URL을 생성하는 함수입니다..

Next.js 버전 14에서 도메인 설정을 remotePatterns로 변경하는 방법Next.js의 새로운 버전 14에서 도메인 설정이 어떻게 변경되었는지에 대해 알아보겠습니다. 특히, 이미지 호스팅과 관련된 설정을 하시는 분들에게 유용한 정보가 될 것 같습니다.Next.js 14에서의 주요 변경 사항Next.js 버전 14에서는 기존의 domains 설정이 deprecated(더 이상 사용되지 않음)되고, 새로운 remotePatterns 설정으로 대체되었습니다. 이는 next.config.js 파일에서 설정할 수 있습니다. 이 변경으로 인해 이미지 호스팅 설정을 더 유연하고 간편하게 할 수 있게 되었습니다.설정 변경하기기존에 domains 설정을 사용하던 분들은 아래와 같은 형식으로 설정을 하고 있었..

NextJS build Error: Failed to fetch dataserver component에서 SSR을 위해 데이터를 패치할때 dev모드에서는 정상적으로 작동하던것이 build할때 문제를 일으킬때가 있다.   해당 문제는 동적으로 데이터를 받아와야할 페이지를 정적으로 구현하려고하니 발생한 문제이다.아래 코드를 import 밑에 삽입하고 다시 build를 해보자.export const dynamic = 'force-dynamic';

next js 에서 build할때 window is not defined error 뜨면서 build가 안되는 경우가 있습니다. 다른 블로그에서 참고했을때는 대부분 렌더링 이전에 window를 사용해서 그렇다라고하며 use client로 client 컴포넌트를 사용하고 useEffect안에서 window를 사용하고나 아래처럼 조건문을 추가하는것을 알려주고 있습니다.if (typeof window !== 'undefined'){ // codes}하지만 진짜  문제는 window를 사용하지 않았을때가 문제입니다. 문제되는 페이지에서 한줄한줄 확인해보니 저같은 경우는 heic2any 라이브러리 사용 코드에서 문제가 생겼었는데요.기존에 문제되는 코드입니다. 위의 코드를 다음처럼 바꿔주니 정상적으로 build되었..

Warning: validateDOMNesting(...):  cannot appear as a descendant of . 말 그대로 p 태그 안에 div 태그를 써서 생긴 문제이다. HTML에서 p 태그는 문단을 나타내는 데 사용되며 p 태그는 텍스트를 하나의 문단으로 그룹화하여 구조화된 텍스트를 작성하는 데 유용하다. 문단은 주로 여러 문장을 포함하며, 웹 페이지의 가독성을 높이는 데 중요한 역할을 한다. 이런식으로 사용하면 Error까지는 아니지만 Warning이 뜬다. (x) hello  p 태그를 다른 태그로 바꾸면 된다. (O) hello