App 폴더 이해하기

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 2번째.

파일 목록을 열어보세요. Next.js 프로젝트는 고유한 구조를 가지며, 이는 다음과 같은 의미를 담고 있습니다:

app/
    layout.jsx     the shell around every page
    page.jsx       the page at /
    globals.css    styles for the whole app

두 개의 파일 이름은 특별하며, 앞으로 자주 사용하게 됩니다:

page.jsx: 폴더를 방문 가능한 URL로 만듭니다. app/page.jsx는 홈 페이지인 /가 됩니다.
layout.jsx: 그 아래에 있는 페이지들을 감쌉니다. 루트 레이아웃은 <html>과 <body>를 포함하므로 every 페이지가 이를 공유합니다.

이 이름들은 임의로 변경할 수 있는 관례가 아닙니다. Next.js는 정확히 이 파일 이름들을 찾습니다. 그것이 파일들로 이루어진 폴더가 URL을 갖는 앱이 되는 방식입니다.

이 레슨들에서는 루트 레이아웃이 잠겨 있으므로 깨진 shell이 app을 다운시키는 일이 전혀 발생하지 않습니다. 여러분은 app/page.jsx 및 직접 추가한 파일에서 작업하게 됩니다.

직접 해보기

이 레슨에는 코드 챌린지가 없습니다.