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

Unhandled Runtime ErrorError: Invalid src prop (http://127.0.0.1:8020/api/files/background.jpg) on `next/image`, hostname "127.0.0.1" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host `next/image` Un-configured HostUsing App Router Features available in /appnextjs.org Nextjs에서 Image를 사용할때 다이렉트로 src에 웹 이미지 url을 사용하..

js로 굳이 refresh 왜함?Server 컴포넌트에서나 정적 페이지에서 데이터가 바뀔경우 페이지 새로고침이 필요할 수 있다. 방법1location.reload(); javascript에서 페이지를 새로 고치는 가장 간단한 방법은 location.reload()메소드를 사용하는 것이다. 이 메서드는 서버에서 현재 웹페이지를 다시 로드하여 현재 콘텐츠를 삭제하고 최신 콘텐츠를 로드합니다. 페이지가 캐시되어 있어도 다시 최신 콘텐츠를 가져오려면 true 넣어주면된다.location.reload(true); location.reload() 사용의 장점간단하고 사용하기 쉬움서버에서 전체 페이지를 다시 로드하여 최신 콘텐츠를 얻을 수 있음location.reload() 사용의 단점페이지의 현재 콘텐츠를 삭제하므..

No index signature with a parameter of type string was found on type타입스크립트에서 string key로 객체에 접근하면 위와 같은 에러가 날 수 있다.const obj = { foo: "hello",}console.log(obj["foo"]) 타입스크립트에서 객체에 접근할때 string literal 타입만 허용되는데 여기에 string 타입을 사용해서 생긴 문제이다. 하지만 switch case 보다는 내가 원하는 키에 따라 다른 값을 적은 코드로 얻고자할때 유용하게 쓰이므로 obj로 값을 얻는게 필요할때가 있다.  빠르게 다음의 해결책을 참고하여 사용해보자.Solution객체를 함수로 반환하게하고 반환 타입에서 키값을 스트링 타입으로 지정해주고..