
리액트(React)와 Next.js를 비교할 때, Next.js를 사용하는 이유는 여러 가지가 있다. Next.js는 리액트의 기능을 확장하고, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등 여러 기능을 추가하여 더 강력한 웹 애플리케이션

Next.js에서는 링크를 연결하는데 a 태그 대신에 Link 컴포넌트를 사용한다. a 태그 : 사용하면 페이지를 이동할 때 페이지 전체를 다시 로딩하기 때문에 속도가 느리고, 빈 화면이 잠깐 보이면서 깜빡거림이 생긴다. Link 컴포넌트 : Next.js에서 내부적으

Next.js에서는 이미지를 사용할 때 Next.js 서버를 한 번 거쳐서 이미지 최적화를 한 다음 사용할 수 있도록 해줘야 한다. 그래서 되도록이면 img 태그보다는 Image 컴포넌트를 사용하는 걸 권장한다. Image 컴포넌트는 next/image에서 불러와서 사

프리렌더링(Pre-rendering)은 웹 페이지의 HTML을 서버에서 미리 생성하는 작업을 말한다. 이를 통해 브라우저에서 페이지를 렌더링하는 시점에 이미 필요한 HTML이 준비되어 있게 되므로, 사용자에게 웹 페이지의 내용을 빠르게 제공할 수 있게 된다. React

MongoDB는 고성능, 고가용성, 쉬운 확장성을 제공하는 NoSQL 데이터베이스로 문서 지향적인 특성을 가지고 있어, 복잡한 계층적 데이터를 효율적으로 저장하며 관리할 수 있고 자바스크립트 문법을 사용하는 특징이 있다. 스키마가 고정되어 있지 않아, 다양한 형태의 데

서버 컴포넌트에서 조회하는 유저 정보를 build 과정에서 불러오지 못하는 에러가 발생했다. 처음 코드에서는 try-catch문 안에 accessToken을 넣었는데 이를 불러오지 못해서 발생한 문제로 파악된다.Next.js의 cookies()는 서버 컴포넌트에서만 사

Error: Text content does not match server-rendered HTML.See more info here: https://nextjs.org/docs/messages/react-hydration-error애플리케이션을 렌더링하는 동

next-themes를 설치ThemeProvider를 layout 파일의 내부에 감싸서 적용해 준다.ThemeProvider는 attribute="class" 속성을 지정해 주어야 Tailwind CSS와 같은 클래스 기반 테마 시스템과 호환된다.기본 설정인 data

기존에는 함수 매개변수에서 구조분해 할당으로 동기 객체로서 바로 사용이 가능했다. 하지만 Next.js 15.1부터는 이 방식은 문제가 된다.그 이유는 params가 이제 동기 객체가 아닌 비동기 객체(Promise) 로 처리되기 때문이다.Next.js 내부적으로 pa