Programming/Next.js
-
- [Next.js] 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)
정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)들어가며사전 렌더링 방법인 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)에 대해 정리해본다. 정적 생성(Static Generation)개념웹 페이지를 미리 생성하여 HTML 파일로 저장하는 방식웹 사이트의 빌드 단계에서 모든 페이지가 사전에 렌더링되며, 사용자가 페이지를 요청할 때 서버에서 미리 생성된 HTML 파일을 즉시 제공하는 방식빠른 로딩 속도와 서버 부하 감소를 위해 사용SSG(Static Site Generation)이라고도 한다. 장점페이지가 미리 생성되어 있으므로, 사용자는 빠르게 페이지를 볼 수 있다. (빠른 페이지 로딩)요청..
2024.08.08 -
- [Next.js] 메타데이터(Metadata) 추가하기
메타데이터(Metadata) 추가하기들어가며Next.js에서 컴포넌트에 메타데이터(Metadata)를 추가하는 방법을 정리해본다. 메타데이터(Metadata)웹페이지에 대한 추가 정보를 제공하는 데이터주로 HTML 문서의 @@ 태그 안에 포함되어 있으며, 검색 엔진 최적화(SEO), 소셜 미디어 공유, 브라우저 설정 등 여러 목적으로 사용된다. 메타데이터 추가하기정적 페이지(Static Page)와 동적 페이지(Dynamic Page)에 메타데이터를 추가하는 방법이 다르다. 정적 페이지방법페이지나 레이아웃 파일에 @metadata@라는 이름의 상수를 내보내는 방식을 통해 메타데이터를 설정할 수 있다.export const metadata = { title: 'All Meals', descriptio..
2024.08.07 -
- [Next.js] 서버 컴포넌트와 클라이언트 컴포넌트
서버 컴포넌트와 클라이언트 컴포넌트들어가며Next.js는 서버 컴포넌트와 클라이언트 컴포넌트의 개념을 도입한 리액트 기반의 풀스택(Full-Stack) 프레임워크이다.Next.js는 단순히 프론트엔드 라이브러리인 리액트를 넘어 서버 측에서도 코드를 실행할 수 있는 기능을 제공한다. 서버 컴포넌트개념Next.js 프로젝트에서는 모든 리액트 컴포넌트가 기본적으로 서버에서 렌더링 된다.이 컴포넌트들을 서버 컴포넌트라고 하며, 브라우저가 아닌 서버에서 실행된다. 예다음과 같이 컴포넌트에 로그를 출력하면, 웹 브라우저 개발자 도구(클라이언트 단)가 아닌, IDE(서버 단)의 터미널에서 로그를 확인할 수 있다. 장점성능 향상클라이언트 측에서 다운로드해야 할 자바스크립트(JS) 코드가 줄어든다. SEO 개선서버 단에..
2024.08.05 -
- [Next.js] Image 컴포넌트
Image 컴포넌트들어가며Next.js에서 기본으로 제공하는 Image 컴포넌트에 대해 정리해본다. Image 컴포넌트개념Next.js에서 기본적으로 제공하는 이미지 최적화를 위해 사용되는 컴포넌트페이지 로딩 속도와 사용자 경험을 향상시키는데 큰 도움을 준다.기본적으로 지연 로딩(Lazy Loading)을 제공하며, 다양한 이미지 최적화 기능을 제공한다. 사용 방법@next/image@ 모듈을 불러와서 사용한다.import Image from 'next/image';export default function Home() { return ( Next.js Image Example );} 기능자동 크기 조정이미지를 자동으로 필요에 따라 리사이징하여 다양한 뷰포트와 디바이..
2024.08.05