Per ardua ad astra.

메타데이터(Metadata) 추가하기들어가며Next.js에서 컴포넌트에 메타데이터(Metadata)를 추가하는 방법을 정리해본다. 메타데이터(Metadata)웹페이지에 대한 추가 정보를 제공하는 데이터주로 HTML 문서의 태그 안에 포함되어 있으며, 검색 엔진 최적화(SEO), 소셜 미디어 공유, 브라우저 설정 등 여러 목적으로 사용된다. 메타데이터  추가하기정적 페이지(Static Page)와 동적 페이지(Dynamic Page)에 메타데이터를 추가하는 방법이 다르다. 정적 페이지방법페이지나 레이아웃 파일에 metadata라는 이름의 상수를 내보내는 방식을 통해 메타데이터를 설정할 수 있다.export const metadata = { title: 'All Meals', descriptio..

서버 컴포넌트와 클라이언트 컴포넌트들어가며Next.js는 서버 컴포넌트와 클라이언트 컴포넌트의 개념을 도입한 리액트 기반의 풀스택(Full-Stack) 프레임워크이다.Next.js는 단순히 프론트엔드 라이브러리인 리액트를 넘어 서버 측에서도 코드를 실행할 수 있는 기능을 제공한다. 서버 컴포넌트개념Next.js 프로젝트에서는 모든 리액트 컴포넌트가 기본적으로 서버에서 렌더링 된다.이 컴포넌트들을 서버 컴포넌트라고 하며, 브라우저가 아닌 서버에서 실행된다. 예다음과 같이 컴포넌트에 로그를 출력하면, 웹 브라우저 개발자 도구(클라이언트 단)가 아닌, IDE(서버 단)의 터미널에서 로그를 확인할 수 있다. 장점성능 향상클라이언트 측에서 다운로드해야 할 자바스크립트(JS) 코드가 줄어든다. SEO 개선서버 단에..