5. File Conventions

Next.js은 파일 규칙 및 디렉토리 구조에 특정한 규칙을 가지고 있습니다. 이을 통해 더 효율적이고, 일관된 프로젝트 구조를 유지합니다.

5-1 page.js

app 폴더 세그먼트에 따라 접근 가능한 경로로를 만들며, 해당 라우트에 페이지를 생성합니다.

about 세그먼트의 페이지 생성 예시

// app/about/page.js
export default function About() {
  <div>About page</div>;
}

5-2. layout.js

여러 하위 경로에서 공통으로 사용하는 UI를 제작하고, 슬롯 방식으로 children props를 사용하여, 하위 세그먼트들을 래핑합니다.

최상위 루트 layout 컴포넌트, {children} 부분에는 /app/page.tsx 컴포넌트가 출력됩니다.

// app/layout.js
import Header from "@/components/Header";

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="ko">
      <body>
        <Header />
        {children}
      </body>
    </html>
  );
}

5-3. template.js

layout과 비슷하지만 navigate시 컴포넌트가 새로 마운트 된다는 기능이 있습니다.

template UI 생성 예시

// app/about/template.js

export default function AboutTemplate() {
  return (
    <>
      <h1>About</h1>
      <p>Total Visitor : {visitor}</p>
    </>
  );
}

5-4. loading.js

자동으로 페이지 또는 중첩된 세그먼트를 Suspense Boundary로 래핑해주고, Susnpense Boundary 내부에서 페이지 혹은 컴포넌트 단위에 fallback UI를 보여줍니다.

loading UI 생성 예시