본문 바로가기
개발 공부/React

Next.js의 app 디렉토리 구조와 파일 역할

윤지민 2024. 12. 21. 18:12

app 디렉토리는 페이지 라우팅과 컴포넌트 구조를 구성하는 방식에 변화를 가져왔습니다.

app 디렉토리는 이전의 pages 디렉토리와 달리, 레이아웃, 오류 처리, 로딩, 동적 라우팅 등 다양한 기능을 모듈화할 수 있는 기회를 제공합니다.

 

 

app 디렉토리 내 각 파일과 폴더의 역할

1. page.tsx

page.tsx 파일은 특정 경로에 대한 페이지를 렌더링합니다.

Next.js는 이 파일을 자동으로 페이지로 인식합니다.

예를 들어, app/about/page.tsx는 /about 경로에 해당하는 페이지입니다.

 

app/about/page.tsx

import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to the About Us page!</p>
    </div>
  );
};

export default AboutPage;
  • AboutPage 컴포넌트는 /about 경로에서 렌더링됩니다.

 

2. layout.tsx

layout.tsx 파일은 페이지의 공통 레이아웃을 정의하는 파일입니다.

이 파일을 통해 페이지 전체에 공통으로 적용되는 헤더, 푸터, 네비게이션 바 등을 설정할 수 있습니다.

레이아웃은 페이지마다 다를 수 있으며, app 디렉토리 내에서 네스트된 디렉토리마다 개별 레이아웃을 정의할 수 있습니다.

 

app/layout.tsx

import React from 'react';

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
      <header>
        <h1>My Website</h1>
        <nav>
          <ul>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </nav>
      </header>
      <main>{children}</main>
      <footer>
        <p>© 2024 My Website</p>
      </footer>
    </div>
  );
};

export default Layout;
  • Layout 컴포넌트는 모든 페이지에 공통으로 적용되는 구조를 정의합니다.
  • children은 각 페이지에 맞는 내용으로 대체됩니다.

 

3. error.tsx

error.tsx 파일은 특정 페이지에서 오류가 발생했을 때 보여줄 오류 페이지를 정의하는 파일입니다.

예를 들어, 네트워크 오류나 API 호출 실패 등으로 페이지가 정상적으로 로드되지 않을 때 이 파일을 사용하여 사용자에게 친절한 오류 메시지를 보여줄 수 있습니다.

 

app/error.tsx

import React from 'react';

const ErrorPage = ({ error }: { error: Error }) => {
  return (
    <div>
      <h1>Something went wrong!</h1>
      <p>{error.message}</p>
    </div>
  );
};

export default ErrorPage;
  • 이 컴포넌트는 오류가 발생한 페이지 대신 렌더링됩니다.

 

4. loading.tsx

loading.tsx 파일은 페이지나 데이터가 로딩 중일 때 표시할 로딩 UI를 정의하는 파일입니다.

페이지 로딩 시 사용자에게 로딩 상태를 명확히 전달하는 것이 중요합니다.

 

app/loading.tsx

import React from 'react';

const Loading = () => {
  return (
    <div>
      <h1>Loading...</h1>
    </div>
  );
};

export default Loading;
  • 이 컴포넌트는 페이지가 로드되는 동안 표시됩니다.

5. not-found.tsx

not-found.tsx 파일은 사용자가 요청한 경로가 존재하지 않을 때 표시할 404 페이지를 정의합니다.

일반적으로 이 파일을 통해 페이지가 없다는 메시지를 보여줍니다.

 

app/not-found.tsx

import React from 'react';

const NotFoundPage = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
    </div>
  );
};

export default NotFoundPage;
  • 이 페이지는 사용자가 존재하지 않는 경로를 입력했을 때 표시됩니다.

 

6. 동적 라우팅

Next.js의 app 디렉토리에서는 동적 라우팅을 지원합니다.

동적 경로를 처리하려면 파일 이름을 대괄호로 감싸면 됩니다.

 

app/products/[id].tsx

import React from 'react';

const ProductPage = ({ params }: { params: { id: string } }) => {
  return (
    <div>
      <h1>Product ID: {params.id}</h1>
    </div>
  );
};

export default ProductPage;
  • 위 예시는 /products/1과 같은 URL 경로에서 동적으로 id 값을 받아 해당 제품 정보를 표시하는 페이지입니다.

 

7. head.tsx

head.tsx 파일은 각 페이지의 <head> 메타 데이터를 설정하는 데 사용됩니다.

페이지별로 제목, 설명, 메타 태그 등을 설정할 수 있습니다.

 

app/head.tsx

export default function Head() {
  return (
    <>
      <title>My Website</title>
      <meta name="description" content="Welcome to My Website" />
    </>
  );
}
  • 이 파일은 각 페이지의 <head> 섹션을 설정하는 데 사용됩니다.

 

 

파일 구조 예시

/my-next-app
│
├── app/
│   ├── about/
│   │   └── page.tsx             # /about 경로에 해당하는 페이지
│   │   └── layout.tsx 
│   ├── contact/
│   │   └── page.tsx             # /contact 경로에 해당하는 페이지
│   │   └── layout.tsx          
│   ├── products/
│   │   ├── [id].tsx             # 동적 라우팅: /products/:id 경로
│   │   └── page.tsx             # /products 경로에 해당하는 페이지
│   ├── layout.tsx               # 공통 레이아웃 (헤더, 푸터 등)
│   ├── error.tsx                # 오류 페이지
│   ├── loading.tsx              # 로딩 중 UI
│   ├── not-found.tsx            # 404 페이지
│   ├── head.tsx                 # 페이지 메타데이터 설정
│   └── page.tsx                 # 기본 페이지 (홈 페이지 등)
│
├── public/                      # 정적 파일 (이미지, 폰트 등)
│   └── favicon.ico
│
├── styles/                      # CSS 스타일 파일
│   └── globals.css
│
├── package.json                 # 프로젝트 설정 파일
├── tsconfig.json                # TypeScript 설정 파일
└── next.config.js               # Next.js 설정 파일

 

  • app/: Next.js의 app 디렉토리로, 페이지, 레이아웃, 오류 처리 등 중요한 파일들이 위치합니다.
    • about/, contact/, products/: 각 디렉토리는 해당하는 경로(/about, /contact, /products)에 대한 페이지를 포함합니다.
    • [id].tsx: 동적 라우팅을 처리하는 파일로, 예를 들어 /products/:id와 같은 경로에서 id 파라미터를 사용하여 동적으로 페이지를 렌더링합니다.
    • layout.tsx: 모든 페이지에 공통적으로 적용되는 레이아웃을 정의합니다.
    • error.tsx: 페이지에서 오류가 발생했을 때 표시될 오류 페이지를 정의합니다.
    • loading.tsx: 페이지나 데이터가 로딩 중일 때 보여줄 로딩 UI를 정의합니다.
    • not-found.tsx: 404 페이지를 정의합니다.
    • head.tsx: 페이지별 <head> 메타 데이터를 설정합니다.
    • page.tsx: 기본 페이지, 예를 들어 홈 페이지를 정의합니다.
  • public/: 이미지, 폰트, 아이콘 등 정적 자원을 저장하는 디렉토리입니다.
  • styles/: 전역 스타일 파일을 포함합니다.
  • package.json: 프로젝트의 의존성, 스크립트, 설정 등을 포함하는 파일입니다.
  • tsconfig.json: TypeScript 설정 파일입니다.
  • next.config.js: Next.js의 설정 파일로, 빌드, 라우팅 등의 설정을 할 수 있습니다.

'개발 공부 > React' 카테고리의 다른 글

Next.js에서 레이아웃 구성 (1) / SessionProvider, AuthProvider  (1) 2024.12.25
Next.js에서 레이아웃 구성하기  (0) 2024.12.22
React createContext / useContext  (0) 2024.12.18
Next.js / React  (1) 2024.12.16
Redux 미들웨어와 비동기 처리  (1) 2024.11.16

'개발 공부/React' Related Articles

티스토리툴바