Next.js 이미지 오류 : Image with src has legacy prop "layout". Did you forget to run the codemod?

👩🏻‍💻 Next.js 이미지 관련 오류 1,2,3 발생 (1) Image with src has legacy prop "layout". Did you forget to run the codemod? > codemod 설치 (2) Image with src~~may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width. > 태그로 이미지 감싸주기 (3) Image with src was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image..

• format_list_bulleted Next.js
• · 2024. 2. 29.
• textsms

Next.js 오류 : Hydration failed because the initial UI does not match what was rendered on the server.

오류 위치 : Header.tsx > Header에 위치한 svg 태그 발생 원인 > 코드 내부에서 안에 사용한 태그를 사용하여 발생함 > Next.js에서 클라이언트와 서버 간의 React 컴포넌트의 일관성을 유지하기 위한 것 > 서버 사이드 렌더링 시의 html과 클라이언트 사이드 렌더링 시의 hmtl이 불일치하여 발생하는 오류 해결 방안 (1) svg 태그의 fill, stroke, strokeLinecap, strokeLinejoin, strokeWidth 등의 속성을 고정된 값이 아닌 동적으로 변할 수 있는 값으로 설정 (2) next/script를 사용하여 외부 스크립트를 로드할 때 strategy="beforeInteractive"을 설정 (3) height / width 설정하기 라고 생각..

• format_list_bulleted Next.js
• · 2024. 2. 29.
• textsms

#02 Next 14 : Data fethcing( Suspense | promise.all | Error Handling )

1. Client Side (1) 평범한 react 앱에서 data fetch 하는 방법 > {JSON.stringify(movies)} > 로딩중인지 꼭 확인해야함. (SWR / React Query를 사용하든지) > 로딩 state와 useState를 항상 써야함 > 여기 client component에서는 metadata 사용 불가능 * server component에서 fetch한다는 것= useEffect/useState/Loading 구현을 쓰지 않아도 된다 2. Server Side > metadata 넣기 가능 > async 함수를 만들고 넣어주면 끝! > useState, useEffect,Loading없이 구현 가능 > 자동으로 fetch 된 url을 캐싱시켜줌 => 한번만 가져오면 다..

• format_list_bulleted Next.js
• · 2024. 2. 29.
• textsms

#01 Next 14 : Routing ( Hydration | Layouts | Metadata | Dynamic Routes)

1. [page]app 폴더 안에 page파일을 찾음 (라우터 설정: url) > 폴더 만들기 - page.tsx 파일 (내부 : export default function) 2. [not-found] url에 없는 경로 입력시 해당 화면 보여줌 3. 태그 대신에는 사용하기 > next에서 지원하는 기능 Link 4.[hook: usePathname() + "use client"] 사용하기 > path name = user가 현재 머물고 있는 url 5. SSR vs CSR => Next.js에서 모든 컴포넌트와 페이지들은 먼저 backen에서 render됨 ( " use client" 이건 브라우저가 주체겠지! => 아님 ) (1) SSR : 서버가 주체임 => 사용자는 next.js가 backend에..

• format_list_bulleted Next.js
• · 2024. 2. 28.
• textsms

next.js 오류 : Invalid src prop~

1.이미지 오류 > next.js는 외부에서 데이터를 가져올 때, 도메인이 설정이 되어 있어야 함 > [next.config.mjs] 에서 도메인 정보 넣어주기.+ 서버 다시 시작하기 2. 데이터 export const getStaticProps: GetStaticProps = async ({ params }) => { const options = { method: 'POST', headers: { accept: 'application/json', 'Notion-Version': '2022-02-22', 'Content-Type': 'application/json', Authorization: `Bearer ${process.env.NOTION_TOKEN}`, }, body: JSON.stringify(..

• format_list_bulleted Next.js
• · 2024. 2. 25.
• textsms

#04 Next.js (Pages Router) + TypeScript : _app, _document, 404

1. _app.tsx > Components = pages 폴더 하단에 있는 pages 컴포넌트 > pageProps : getServerSideProps, getStaticProps, getStaticPaths 등 데이터 패칭을해서 가져온 결과값 > Next.js의 root component에 해당하는 파일 => CRA의 index.js나 App.jsx에 해당하는 파일이라고 생각해 무방 사용 예시 모든 페이지의 공통 레이아웃 글로벌 CSS적용 초기값 설정 2. _document.tsx ( Pages Router에서만 사용됨) > HTML 구조를 커스텀 할 때 사용하는 파일 > 오직 Server Side에서만 렌더링 됨 (useEffect 사용 불가능) > Styled Component와 같은 CSS-i..

• format_list_bulleted Next.js
• · 2024. 2. 22.
• textsms