error.js는 경로 세그먼트에 대한 오류 UI 경계를 정의한다.error 객체의 인스턴스다. 이 오류는 서버나 클라이언트에서 발생할 수 있다.응답을 반환하지 않는 error boundary를 재설정하는 함수다.error.js boundary는 클라이언트 컴포넌트여야

아래는 <Script>에서 사용 가능한 요소들이다.<Script /> 컴포넌트는 다음과 같은 속성이 필요하다.외부 스크립트의 URL을 지정하는 경로 문자열이다. 이는 절대 외부 URL이나 내부 경로일 수 있다. src 속성은 인라인 스크립트를 사용하지 않는

<Link>는 React 컴포넌트로, HTML <a> 요소를 확장하여 prefetching(사전로드) 및 클라이언트 측에서 라우트 간 탐색을 제공한다. 이는 Next.js에서 라우트 간 탐색을 위한 주요 방법이다.Next.js 애플리케이션에서 <Link

다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.변수나 자료구조(객체, 배열)에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다.자바스크립트의 함수는 일급 객체다.

객체 리터럴에 의한 객체 생성 방식은 가장 일반적이고 간단한 객체 생성 방식이다. 객체는 객체 리터럴 이외에도 다양한 방법으로 생성할 수 있다. 객체 리터럴을 사용하여 객체를 생성하는 방식과 생성자 함수를 사용하여 객체를 생성하는 방식과의 장단점을 알아보자. Obj

내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. (\[\[ … ]]) 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드다.내부 슬롯과 내부 메서드는 자바스크립트 엔진의

아래는 <Image> 컴포넌트에서 사용 가능한 props다.이미지 컴포넌트에는 src, width, height, alt 속성이 필요하다.src 속성에는 정적으로 가져온 이미지 파일 또는 경로 문자열을 사용해야한다. loader 속성에 따라 절대적인 외부 URL

var 키워드로 선언한 변수는 중복 선언이 가능하다.var 키워드로 선언한 변수를 중복 선언하면 초기화문(변수 선언과 동시에 초기값을 할당하는 문) 유무에 따라 다르게 동작한다.초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다

변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 지역변수의 생명주기는 함수의 생명 주기와 일치한다.함수 몸체 내부에서 선언된 지역 변수의 생명 주기는 함수의 생명 주기와 대부분 일치하지만 지역 변수가

Next.js의 레이지 로딩은 경로를 렌더링하는 데 필요한 JavaScript 양을 줄여 애플리케이션의 초기 로딩 성능을 향상시키는 데 도움이 된다.레이지 로딩을 사용하면 클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시킬 수 있으며, 필요할 때만 클라이언트 번들

Next.js는 루트 디렉토리에 public이라는 폴더 아래와 같이 이미지와 같은 정적 파일을 제공할 수 있다.public 내부의 파일은 기본 URL (/)을 기준으로 코드에서 참조할 수 있다.예를 들어, public 내부에 me.png를 추가하면 다음 코드로 이미지에

Next.js에는 SEO 및 웹 공유성을 향상시키기 위해 애플리케이션의 메타데이터(예: HTML head 요소 내부의 meta 및 link 태그)를 정의할 수 있는 Metadata API가 있다.애플리케이션에 메타데이터를 추가하는 두 가지 방법이 있다.구성 기반 메타데

여러 경로에 대해 타사 스크립트를 로드하려면 next/script를 가져오고 스크립트를 직접 레이아웃 컴포넌트에 포함시킨다.사용자가 폴더 경로 (예: dashboard/page.js) 또는 중첩된 경로 (예: dashboard/settings/page.js)에 액세스할

next/font는 폰트를 자동으로 최적화하고(사용자 정의 폰트 포함) 개인 정보 보호와 성능 향상을 위해 외부 네트워크 요청을 제거한다. 참고자료next/font에는 모든 폰트 파일에 대한 내장 자동 셀프 호스팅 기능이 포함되어 있다. 이는 사용되는 기본 CSS si

Next.js의 Image 컴포넌트는 HTML <img> 요소를 확장하여 다음과 같은 기능을 제공한다.크기 최적화WebP 및 AVIF와 같은 현대적인 이미지 형식을 사용하여 각 장치에 맞게 올바르게 크기 조정된 이미지를 자동으로 제공한다.시각적 안정성이미지가 로드

Next.js에는 애플리케이션의 속도와 Core Web Vitals를 개선하기 위해 설계된 다양한 내장 최적화 기능이 제공된다. 내장 컴포넌트는 일반적인 UI 최적화를 구현하는 복잡성을 추상화한다. 이러한 컴포넌트는 다음과 같다.네이티브 <img> 요소를 기반으로

Next.js는 애플리케이션의 스타일링을 위해 다양한 방법을 지원한다.Global CSS : 전통적인 CSS에 익숙한 사용자에게는 간단하고 익숙한 방법이지만, 애플리케이션이 커짐에 따라 CSS 번들이 커지고 스타일 관리가 어려워질 수 있다.CSS Module : 이름

모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다.아래 예제에서 자바스크립트 엔진은 이름이 같은 두 개

Server Actions은 Next.js의 알파 기능으로, React Actions을 기반으로 구축되었다. 이 기능을 사용하면 서버 측 데이터 변경, 클라이언트 측 JavaScript 감소 및 점진적으로 향상된 폼을 구현할 수 있다.Next.js 프로젝트에서 Serv

Next.js를 사용하면 전체 사이트를 다시 빌드할 필요 없이 특정 정적 경로를 업데이트할 수 있다. 재유효화(증분적 정적 재생성으로도 알려짐)를 사용하면 정적인 이점을 유지하면서 수백만 개의 페이지로 확장할 수 있다.Next.js에서는 두 가지 유형의 재유효화가 있다