Next.js 13에서 앱 디렉토리가 작동하는 방식
Next.js 13은 앱 디렉토리를 사용하는 새로운 라우팅 시스템을 도입했습니다. Next.js 12는 이미 파일 기반 경로를 통해 경로를 처리하는 쉬운 방법을 제공했습니다. 페이지 폴더에 구성 요소를 추가하면 자동으로 경로가 됩니다. 이 새 버전에서 파일 시스템 기반 라우터에는 레이아웃, 템플릿 중첩 라우팅, 로딩 UI, 오류 처리, 서버 구성 요소 및 스트리밍 지원을 위한 내장 설정이 함께 제공됩니다.
이 문서에서는 이러한 새로운 기능과 중요한 이유에 대해 설명합니다.
Next.js 시작하기 13
터미널에서 다음 명령을 실행하여 고유한 Next.js 13 프로젝트를 만듭니다.
npx create-next-app@latest next13 --experimental-app
이렇게 하면 새 앱 디렉토리가 있는 next13이라는 새 폴더가 생성됩니다.
새 앱 디렉토리 이해
Next.js 12 는 라우팅을 위해 페이지 디렉토리를 사용했지만 Next.js 13에서는 app/ 디렉토리 로 대체되었습니다. Pages/ 디렉토리는 여전히 Next 13에서 작동하여 점진적 채택을 허용합니다. 오류가 발생하므로 동일한 경로에 대해 두 디렉토리에 파일을 생성하지 않는지 확인하기만 하면 됩니다.
다음은 앱 디렉토리의 현재 구조입니다.
앱 디렉터리에서 폴더를 사용하여 경로를 정의하고 이 폴더 내의 파일을 사용하여 UI를 정의합니다. 다음과 같은 특수 파일도 있습니다.
- page.tsx – 특정 경로에 대한 UI를 만드는 데 사용되는 파일입니다.
- layout.tsx – 경로의 레이아웃 정의를 포함하며 여러 페이지에서 공유할 수 있습니다. 탐색 메뉴 및 사이드바에 적합합니다. 탐색 시 레이아웃은 상태를 유지하고 다시 렌더링하지 않습니다. 이는 레이아웃을 공유하는 페이지 사이를 탐색할 때 상태가 동일하게 유지됨을 의미합니다. 한 가지 유의할 점은 전체 애플리케이션에서 공유되는 모든 HTML 및 본문 태그를 포함하는 최상위 레이아웃(루트 레이아웃)이 있어야 한다는 것입니다.
- template.tsx – 템플릿은 레이아웃과 비슷하지만 상태를 유지하지 않고 페이지를 만드는 데 사용될 때마다 다시 렌더링됩니다. 템플릿은 예를 들어 시작 및 종료 애니메이션과 같이 구성 요소가 마운트될 때마다 특정 코드를 실행해야 하는 상황에 적합합니다.
- error.tsx – 이 파일은 애플리케이션의 오류를 처리하는 데 사용됩니다. React 오류 경계 클래스로 경로를 래핑하여 해당 경로 또는 그 자식에서 오류가 발생하면 사용자에게 친숙한 오류 페이지를 렌더링하여 복구를 시도합니다.
- loading.tsx – 경로 UI가 백그라운드에서 로드될 때 로딩 UI가 서버에서 즉시 로드됩니다. 로딩 UI는 스피너 또는 스켈레톤 화면일 수 있습니다. 경로 콘텐츠가 로드되면 로드 UI를 대체합니다.
- not-found.tsx – 찾을 수 없는 파일은 Next.js에서 해당 페이지에 대한 404 오류가 발생할 때 렌더링됩니다. Next.js 12에서는 수동으로 404 페이지를 만들고 설정해야 합니다.
- head.tsx – 이 파일은 정의된 경로 세그먼트의 헤드 태그를 지정합니다.
Next.js 13에서 경로를 만드는 방법
앞에서 언급한 것처럼 경로는 app/ 디렉토리의 폴더를 사용하여 생성됩니다. 이 폴더 안에 해당 특정 경로의 UI를 정의하는 page.tsx 라는 파일을 만들어야 합니다.
예를 들어 경로가 /products 인 경로 를 만들려면 app/products/page.tsx 파일을 만들어야 합니다.
/products/sale 과 같은 중첩된 경로 의 경우 폴더 구조가 app/products/sale/page.tsx 처럼 보이도록 폴더를 서로 중첩합니다 .
앱 디렉토리가 지원하는 다른 흥미로운 기능을 라우팅하는 새로운 방법 외에도 서버 구성 요소와 스트리밍이 있습니다.
앱 디렉토리에서 서버 구성 요소 사용
앱 디렉터리는 기본적으로 서버 구성 요소를 사용합니다. 이 접근 방식은 구성 요소가 서버에서 렌더링될 때 브라우저로 전송되는 JavaScript의 양을 줄입니다. 이렇게 하면 성능이 향상됩니다.
더 자세한 설명은 Next.js의 다양한 렌더링 방법에 대한 이 기사를 참조하십시오.
서버 구성 요소는 클라이언트 측에 노출되지 않고 환경 비밀에 안전하게 액세스할 수 있음을 의미합니다. 예를 들어 process.env 를 사용할 수 있습니다 .
백엔드와 직접 상호 작용할 수도 있습니다. 서버 구성 요소에서 async/await를 사용하여 데이터를 가져올 수 있으므로 getServerSideProps 또는 getStaticProps 를 사용할 필요가 없습니다 .
API에서 데이터를 가져오는 이 비동기 함수를 고려하십시오.
async function getData() {
try{
const res = await fetch('https://api.example.com/...');
return res.json();
} catch(error) {
throw new Error('Could not fetch data')
}
}
다음과 같이 페이지에서 직접 호출할 수 있습니다.
export default async function Page() {
const data = await getData();
return <div></div>;
}
서버 구성 요소는 비대화형 콘텐츠를 렌더링하는 데 적합합니다. React 후크, 이벤트 리스너 또는 브라우저 전용 API를 사용해야 하는 경우 가져오기 전에 구성 요소 상단에 “use client” 지시문을 추가하여 클라이언트 구성 요소를 사용하세요.
App Directory의 증분식 스트리밍 구성 요소
스트리밍이란 모든 구성 요소가 렌더링될 때까지 UI의 일부를 클라이언트에 점진적으로 보내는 것을 말합니다. 이를 통해 사용자는 나머지가 렌더링되는 동안 콘텐츠의 일부를 볼 수 있습니다. 사용자에게 더 나은 경험을 제공하려면 서버가 콘텐츠 렌더링을 완료할 때까지 스피너와 같은 로드 구성 요소를 렌더링합니다. 다음 두 가지 방법을 사용하여 이 작업을 수행합니다.
- 전체 경로 세그먼트에 대해 렌더링될 loading.tsx 파일 생성 .
export default function Loading() {
return <p>Loading...</p>
}
- React Suspense 경계로 개별 구성 요소를 래핑하고 폴백 UI를 지정합니다.
import { Suspense } from "react";
import { Products } from "./Components";
export default function Sale() {
return (
<section>
<Suspense fallback={<p>Products...</p>}>
<Products />
</Suspense>
</section>
);
}
제품 구성 요소가 렌더링되기 전에 사용자에게 “제품…”이 표시됩니다. 사용자 경험 측면에서 빈 화면보다 낫습니다.
Next.js 13으로 업그레이드
새로운 앱 디렉토리는 확실히 이전 페이지 디렉토리보다 개선되었습니다. 여기에는 수동 설정 없이 경로를 렌더링할 때 다양한 상태를 처리하는 레이아웃, 헤드, 템플릿, 오류, 찾을 수 없음 및 로드와 같은 특수 파일이 포함됩니다.
또한 앱 디렉토리는 스트리밍 및 서버 구성 요소를 지원하여 성능을 향상시킵니다. 이러한 기능은 사용자와 개발자 모두에게 유용하지만 대부분은 현재 베타 버전입니다.
그러나 페이지 디렉터리가 계속 작동하므로 Next.js 13으로 업그레이드한 다음 원하는 속도로 앱 디렉터리를 사용할 수 있습니다.
답글 남기기