참치코더의 꿈 메모장

Next.js / 페이지, 레이아웃, 템플릿 사용법 정리 본문

Next.js

Next.js / 페이지, 레이아웃, 템플릿 사용법 정리

참치깡 2025. 9. 25. 18:03
728x90

 

제미나이가 생성한 Next.js 이미지

 

1. 페이지 (Page)

 

- 위치 : app/ 디렉토리 안의 page.tsx (또는 page.jsx)

- 역할 : URL 경로와 직접 연결되는 실제 화면 단위

 

특징

- URL 라우팅을 담당 -> app/about/page.tsx -> /about

- 기본적으로 Server Component (필요시 Client Component 사용 가능)

 

2.  레이아웃 (Layout)

 

- 위치 : app/ 디렉토리 안의 layout.tsx

- 여러 페이지에서 공통으로 유지되는 UI를 정의 (네비게이션, 푸터, 사이트바 등)

 

특징

- 특정 경로 이하의 모든 하위 경로에 적용

- 상태가 유지됨 ->  페이지 전환 시에도 Layout은 다시 렌더링되지 않음

- 중첩 가능 -> 상위 Layout + 하위 Layout 구조로 중첩되서 보여주는게 가능하다

- 앱 라우터의 루트 레이아웃은 html 태그와 body 태그를 필수적으로 포함해야 한다

- 독립적인 레이아웃을 적용하고 싶다면, 라우트 그룹을 사용하여 루트 레이아웃을 여러개 만들면 된다.

  이때는 각각의 루트 레이아웃에 html태그와 body 태그가 필수적으로 추가되어야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
//app/layout.tsx
 
export default function RootLayout({ childern } : {children : React.ReactNode }) {
    return (
        <html>
            <body>
                <header>공통 헤더</header>
                <main>{children}</main>
                <footer>공통 </footer>
            </body>
        </html>
    )
}
 cs

 

3.  템플릿 (Template)

 

- 위치: app/ 디렉토리 안의 template.tsx

- 역할 : 특정 구역에서 페이지 전환 시 새로운 인스턴스를 생성하는 레이아웃과 비슷한 컴포넌트

 

특징

- Layout과 비슷하지만, 상태가 유지되지 않음 

- 즉, 페이지 이동 시마다 새로 렌더링됨

- 페이지 전환 시 애니메이션, 초기화가 필요한 경우에 사용

1
2
3
4
5
6
7
8
9
// app/dashbord/template.tsx
 
export default function DashboardTemplate({children} : { children: React.ReactNode}) {
    return (
        <section className="fade-in">
            {children}
        </section>
    );
}
 cs
728x90
저작자표시 비영리 (새창열림)

'Next.js' 카테고리의 다른 글

Next.js / API 서버 호출 및 동시 호출 방법 정리(코드 위주)  (0) 2025.10.05
Next.js / 기본적인 파일 기반 라우팅(폴더 구조), CSR VS SSR, 메타데이터 정리  (0) 2025.10.02
Next.js / 앱 라우터의 라우트 핸들러 미니정리  (0) 2025.09.30
Next.js / 정적 메타 데이터 , 동적 메타 데이터 선언 방법  (0) 2025.09.27
Next.js / 라우팅 기본 정리 (ver 12- , ver13+) 비교  (0) 2025.09.20
'Next.js' Related Articles more
Comments