Next@13 App Directory 예제
Menu
Layouts
Nested Layouts
Grouped Layouts
File Conventions
loading.js
error.js
head.js
Data Fetching
Static-Site Generation
Server-Side Rendering
Incremental Static Regeneration
Streaming with Suspense
Components
Client context
Styles
CSS and CSS-in-JS
Server Action
form action
form action with data
form action with useTransition
Examples
Layouts
Nested Layouts
중첩 레이아웃 - 주소에 따라 적용할 수 있는 레이아웃
Grouped Layouts
그룹 레이아웃 - 주소에 영향을 미치지 않고 특정 주소에 따라 그룹화
File Conventions
loading.js
데이터를 불러오거나 렌더링하는 동안 표시할 수 있는 로딩 컴포넌트
error.js
에러 발생시 렌더링할 수 있는 에러 컴포넌트
head.js
URL에 따라 보여줄 수 있는 head
Data Fetching
Static-Site Generation
기존 getStaticProps을 nextjs@13에서 구현하는 방법
Server-Side Rendering
기존 `getServerSideProps`를 nextjs@13에서 구현하는 방법
Incremental Static Regeneration
기존 `getStaticProps`와 revalidate 옵션을 구현하는 방법
Streaming with Suspense
React Suspense를 활용한 서버 스트리밍 데이터 불러오기
Components
Client context
`Context`는 상태를 가지고 있으므로 반드시 클라이언트 컴포넌트여야 한다.
Styles
CSS and CSS-in-JS
스타일을 적용하는 다양한 방법
Server Action
form action
서버액션을 form과 함께 사용해보기
form action with data
서버액션을 form과 데이터를 기반으로 사용해보기
form action with useTransition
서버액션을 useTransition과 함께 사용해보기