Frontend/Next 2

"Warning: Prop `className` did not match" 에러 이유 및 해결방법

1. Warning: Prop `className` did not match" 에러 이유 Next.js랑 Styled Components를 함께 사용할 경우 발생하는 에러임서버에서 렌더링된 컴포넌트의 className이 클라이언트에서 렌더링된 className랑 일치하지 않아서 생기는 에러임이런 에러는 서버사이드 렌더링(SSR)이 발생할때 생길수 있는 에러로 초기렌더링 될때만 발생하고 그 이후엔 발생하지 않음2. Warning: Prop `className` did not match" 해결 방법해결방법은 의외로 간단함 프로젝트 파일에 next.confing.js를 변경만해주면됨 프로젝트를 만들면 초기에 아래와 같이 코드가 작성 되어있을텐데/** @type {import('next').NextConfig}..

Frontend/Next 2024.04.19

"Page Router" vs "App Router"

1. Page Router특징 : Page 컴포넌트는 각각의 페이지를 정의하는 데 사용됩니다. 각 페이지는 고유한 경로를 가지며 해당 경로로 사용자가 이동할 때마다 렌더링됨장점 :각 페이지에 대해 고유한 레이아웃 및 동작을 정의할 수 있음페이지마다 필요한 데이터를 가져오고 렌더링할 수 있음필요에 따라 동적 라우팅을 구현할 수 있음단점 :페이지 간의 공통된 레이아웃을 관리하기 위해 추가적인 노력이 필요할 수 있음페이지마다 코드 중복이 발생할 수 있음2. App Router특징 : App 컴포넌트는 전체 애플리케이션의 레이아웃을 정의하는 데 사용됩니다. 일반적으로 모든 페이지에서 공통되는 레이아웃, 머리글, 바닥글 등을 포함됨장점 :전역 상태 관리 또는 레이아웃 관리를 위해 사용할 수 있음모든 페이지에 반복..

Frontend/Next 2024.04.11