Next.js에서 에러 페이지란?Next.js에서 에러 페이지는 웹 어플리케이션에서 발생하는 오류 상황을 사용자에게 효과적으로 전달하기 위해 설계된 페이지이다. 예를 들어, 없는 페이지의 경로로 접속하거나(404), 서버에서 예상치 못한 오류가 발생할 때(500) 이 페이지가 사용된다. 또한, API 요청이 실패하거나 데이터 처리 중 오류가 발생하는 등 런타임 과정에서 에러가 발생했을 때 사용자들에게 오류를 알리는 페이지이다. 이것은 개발자가 오류 상황을 효과적으로 관리하고, 사용자에게 오류가 발생했으니 어떤 행동을 취하라는 식의 적절한 피드백을 줄 수 있도록 돕는 역할을 수행한다. 에러 페이지 만들기 : Page Router// 404.tsxexport default function Custom404(..

데이터 캐시export default async function Page() { const response = await fetch("~/api", { cache: "force-cache" });}우리가 백엔드 서버로 fetch()를 통해 API를 요청하는 경우가 있다고 하자. 위 코드처럼 우리는 fetch()를 이용해 백엔드 서버와 통신할 수 있다. 그런데 만약 이 데이터가 한 번 쓰고 끝나는 데이터가 아니라 여러 곳에서 재사용되는 데이터라면, 매번 사용할 때마다 백엔드 서버로 계속 요청을 보내야 할까? 데이터 캐시는 이러한 불필요한 요청을 줄이기 위한 기능으로, fetch()로 불러온 데이터를 Next.js 서버에 보관하는 역할을 한다. 이렇게 하면, 다음번에 동일한 데이터가 필요할 때 백엔드 ..

Image를 쓰는 이유Next.js에서는 이미지를 넣을 때 태그를 사용하기도 하지만, 최적화를 위해 Image 컴포넌트를 주로 사용한다.그렇다면, 어떻게 이미지 최적화를 시켜주고 어떤 기능이 있는지 대표적인 3가지 기능을 살펴보자. 1. 이미지 사이즈 최적화Image 컴포넌트를 통해 이미지를 넣고 개발자 도구로 확인해 보면 img 태그 속성에 'srcset'이 있는 걸 확인할 수 있다.srcset 속성은 Image 컴포넌트가 디바이스 별로 미리 지정해 둔 크기에 맞춰 이미지를 다운로드할 수 있게 도와주는 속성이라고 생각하면 된다. 예를 들어, 우리가 아이폰 미니로 접속한다면 1920px 사이즈의 큰 이미지를 다운로드할 필요가 없다. 즉, 사용자의 디바이스 크기가 작다면 알아서 작은 크기에 맞는 이미지를..

CSR, SSR, SSG는 뭐가 다를까?우리가 리액트를 공부할 때, CSR(클라이언트 사이드 렌더링)을 배우면서 SSR도 같이 들어본 적이 있을 것이다.CSR은 서버에서 비어있는 html 파일을 클라이언트에게 주면 클라이언트가 자바스크립트로 페이지를 그리는 방식이라면, SSR은 서버에서 렌더링 된 html 파일을 클라이언트에게 주면 클라이언트가 자바스크립트로 동적인 부분만 연결(Hydration)해 주는 방식이다. 그렇다면 SSG는 뭘까? SSR에서는 페이지에 접속할 때마다 html 파일을 렌더링 했지만, SSG는 이미 빌드하는 순간에 모든 페이지를 렌더링 한다. 즉, 클라이언트가 서버에게 페이지를 요청할 때 SSR은 "잠깐만! 렌더링 하고 금방 줄게!"라면, SSG는 "응~ 그럴 줄 알고 미리 만들어놨..

_app.js와 _document.jsnext.js를 설치하면 pages안에 _app.js와 _document.js가 기본적으로 들어있는 것을 확인할 수 있다.리액트와 비교했을 때 _app.js는 App.js와 같고 _document.js는 index.html과 같다. _app.js는 root 컴포넌트로 다른 컴포넌트를 자식 컴포넌트로 받아와서 렌더링 한다. _document.js는 모든 페이지에 공통적으로 들어가는 html 문서 역할을 하며, 메타 태그나 폰트 등 전체 페이지에서 적용되는 html 태그들을 관리한다. 🙋🏻‍♂️ 각 파일 간 포함 관계 정리 (렌더링 과정)1) _document.js의 에는 _app.js가 래핑된다.2) _app.js의 에는 index.js에서 정의한 페이지 컴포넌트가..