Next.js

Next.js란 웹 어플리케이션을 구축하기 위한 프레임워크입니다. Next.js를 사용하면 사용자 인터페이스를 구축할 수 있습니다. 또한 어플리케이션을 위한 추가 구조, 기능 및 최적화를 제공합니다.또한 Next.js는 내부적으로 번들링, 컴파일 등과 같은 툴을 추상화

서버 및 클라이언트 컴포넌트를 사용하면 개발자는 CSR 앱의 풍부한 상호작용과 SSR 앱의 향상된 성능을 결합하여 서버와 클라이언트를 아우르는 애플리케이션을 구축할 수 있습니다.React가 UI 구축에 대한 사고방식을 바꾼 것과 유사하게, React 서버 컴포넌트는 서

모든 애플리케이션의 골격은 라우팅입니다.먼저, 사용되는 용어에 대해 정리해봅니다.트리 : 계층 구조를 시각화하기 위한 규칙입니다. 예를 들어 부모 및 자식 컴포넌트로 구성된 컴포넌트 트리, 폴더 구조 등이 있습니다.서브트리 : 트리의 일부로, 새 루트에서 시작하여 리프

Next.js 애플리케이션에서 경로를 정의하고 구성하는 방법Next.js는 폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용합니다.각 폴더는 URL 세그먼트에 매핑되는 Route Segment를 나타냅니다. 중첩 라우팅을 사용하려면 폴더를 서로 중첩시키면

Next.js 라우터는 클라이언트 측 navigating과 서버 중심 라우팅을 사용합니다. 즉각적인 로딩 상태와 동시 랜더링을 지원합니다. 즉, navigating은 클라이언트 측 상태를 유지하고 비용이 많이 드는 리랜더링을 피하고, 중단이 가능하며 race condi

앱 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑됩니다. 그러나 폴더를 Route Group으로 표시하여 폴더가 라우트의 URL 경로에 포함되지 않도록 할 수 있습니다.이렇게 하면 URL 경로 구조에 영향을 주지 않고 Route Segment와 프로젝트 파일

정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터로 경로를 생성하려는 경우, 요청 시 채워지거나 빌드 타임에 미리 랜더링되는 동적 세그먼트를 사용할 수 있습니다.동적 세그먼트는 폴더 이름을 대괄호로 묶어 만들 수 있습니다.동적 세그먼트는 layout, page, r

특수 파일 loading.js를 사용하면 React.Suspense로 의미 있는 로딩 UI를 만들 수 있습니다. 이 규칙을 사용하면 Route Segment의 콘텐츠가 로드되는 동안 서버에서 즉각적인 로딩 상태를 표시할 수 있습니다. 랜더링이 완료되면 새 콘텐츠가 자동

error.js 파일 규칙을 사용하면 중첩 라우팅에서 런타임 오류를 우아하게 처리할 수 있습니다.경로 세그먼트와 그 중첩된 자식들을 React 에러 바운더리에서 자동으로 래핑합니다.파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞춘 오류 UI를 생성하여 세분화할 수

병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 랜더링할 수 있습니다. 소셜 사이트의 대시보드 및 피드와 같이 앱에서 매우 동적인 섹션의 경우 병렬 라우팅을 사용하여 복잡한 라우팅 패턴을 구현할 수 있습니다.예를 들어 Team 페이

라우트 가로채기를 사용하면 현재 페이지의 컨텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있습니다. 이 라우팅 페러다임은 특정 경로를 가로채서 다른 경로를 표시하려는 경우에 유용할 수 있습니다.예를 들어 피드 내에서 사진을 클릭하면 피드에 오버레이되는 모달

라우터 핸들러를 사용하면 웹 요청 및 응답 API를 사용하여 지정된 라우트에 대한 사용자 지정 요청 핸들러를 만들 수 있습니다.라우터 핸들러는 앱 디렉터리 내에서만 사용할 수 있습니다. 라우트 핸들러는 페이지 디렉터리 내의 API 경로와 동일하므로 API 경로와 라우트

미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행할 수 있습니다. 그런 다음 들어오는 요청에 따라 요청 또는 응답 헤더를 재작성, 리디렉션, 수정하거나 직접 응답하며 응답을 수정할 수 있습니다.미들웨어는 캐시된 콘텐츠와 경로가 일치하기 전에 실행됩니다. 자세한 내용

폴더 및 파일 규칙을 라우팅하는 것 외에는 프로젝트 파일을 구성하고 배치하는 방법에 대해 Next.js는 의견을 제시하지 않습니다.이번에는 프로젝트를 구성되는 데 사용할 수 있는 기본 동작과 기능을 공유합니다.기본적으로 안전한 colocation프로젝트 정리 기능프로젝

랜더링은 작성한 코드를 사용자 인터페이스로 변환합니다.React 18과 Next.js 13은 애플리케이션을 랜더링하는 새로운 방법을 도입했습니다. 이번에는 렌더링 환경, 전략, 런타임의 차이점과 이를 선택하는 방법을 정리합니다.애플리케이션 코드를 랜더링할 수 있는 환경

데이터 불러오기는 모든 애플리케이션의 핵심 부분입니다. 이 페이지에서는 React와 Next.js에서 데이터를 불러고오, 캐시하고, 재검증하는 방법에 대해 설명합니다.데이터를 불러오는 방법은 크게 세 가지가 있습니다.서버에서,fetch API를 사용하는 방법서버에서,

React와 Next.js에서 데이터를 가져오는 데 권장되는 몇 가지 패턴과 모법 사례가 있습니다. 이 페이지에서는 가장 일반적인 패턴 몇 가지와 그 사용법을 살펴봅니다.가능하면 서버에서 데이터를 가져오는 것이 좋습니다. 이렇게 하면 다음과 같이 할 수 있습니다.백엔드

서버 액션은 React 액션을 기반으로 구축한 Next.js의 알파 기능입니다. 서버 측 데이터 변경, 클라이언트 측 자바스크립트 감소, 점진적으로 개선된 폼을 지원합니다. 서버 컴포넌트 내부에서 정의하거나 클라이언트 컴포넌트에서 호출할 수 있습니다.서버 컴포넌트에서