2023. 8. 24. 20:28ㆍLibrary,Framework
Next JS 13 적용해 보기 시리즈
2023.03.05 - [Library,Framework] - Next JS 13 적용해 보기 - App Routing 편
2023.08.15 - [Library,Framework] - Next JS 13 적용해 보기 - 데이터 불러오기 Data Fetching 편
이번 Next JS 13 적용해보기 시리즈에서는 navigation, sidebar, footer 등 여러 페이지에서 공통적으로 사용될 수 있는 레이아웃을 만들고 사용해 보도록 하겠습니다.
Next JS 13 이전 버전에서 공통 레이아웃 적용 방법은 아래 글을 참고 해주시길 바랍니다.
[NEXT.js] 넥스트 JS를 배워보자 2편 - 공통 레이아웃
오늘은 Next JS에서 공통된 레이아웃 (Header, Footer 등 여러 페이지에서 반복적으로 사용되는 컴포넌트)를 정의하는 방법에 대해 설명해보려고 한다. 보통 React의 경우, import Navbar from '/Navbar' export def
mingeesuh.tistory.com
App 디렉토리로 더욱 쉬워진 레이아웃 정의
Next 13에 새롭게 추가된 app 디렉토리와 함께 공통 레이아웃을 적용하는 방법은 더욱더 간단하고 직관적으로 변했습니다.
공통 레이아웃을 적용하고 싶은 페이지 디렉토리에 layout 파일을 생성하고 정의해주시면 됩니다.
필자는 1편에서 next 13 예제를 위해 직접 만든 프로젝트에서 진행을 해보겠습니다.
아직 프로젝트를 만들지 않으신 분들은 아래 명령어를 입력하여 직접 한번 만들어 보시길 바랍니다.
npx create-next-app@latest
새 프로젝트 생성시 Next 13에 새롭게 소개된 App Router를 사용한다고 명시했을 시, 아래와 같이 app 최상위 디렉토리에 layout.js 파일이 생성된 걸 확인할 수 있습니다.
한번 자세히 들여다 보겠습니다.
app/layout.js
import './globals.css'
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Root Layout (루트 레이아웃)
컴포넌트 이름부터 유추할 수 있듯이 app 최상위에 있는 layout은 root layout으로 모든 페이지에 공통적으로 보이는 레이아웃 영역입니다. Root Layout은 필수로 있어야 하며 다른 공통 레이아웃과는 달리 필수로 html과 body 태그가 포함되어 있어야 합니다. 레이아웃도 기본적으로 서버 컴포넌트이기 때문에 data fetching을 할 수 있습니다. 서버 컴포넌트와 data fetching 개념을 아직 이해하지 못하신 분들은 이전 편을 참고해 주시길 바랍니다.
보통 해당 root 레이아웃에서는 모든 페이지에서 보여야 하는 Navigation 바 또는 Footer 같은 공통된 레이아웃을 정의하는 게 일반적입니다.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Navbar />
{children}
<Footer />
</body>
</html>
);
}
Nested Layout (중첩 레이아웃)
Next 13 이전 버전에서 중첩된 레이아웃을 사용하는 데에 있어 불편함을 느낀 분들이 많았습니다. 한번 세팅하고 나면 크게 어려운 작업은 아니었지만 그래도 매번 프로젝트를 진행할 때마다 세팅해줘야 했기 때문에 번거롭게 느껴질 수 있는 부분이었습니다. Next 13 버전에서는 다행히도 중첩된 레이아웃을 정의하는 게 훨씬 쉬워졌습니다.
방법은 루트 레이아웃을 생성하는 방법과 똑같습니다. 대신 이번엔 최상위 디렉토리가 아닌 해당 레이아웃을 적용하고 싶은 페이지 디렉토리에 layout 파일을 생성 후 정의 하시면 됩니다.
app/posts/layout.js
export default function Layout({ children }) {
return (
<>
<Header /> <section>{children}</section>
</>
);
}
루트 디렉토리와 다른점은 html과 body태그가 없다는 점입니다.
아래글은 중첩 레이아웃의 구조를 더 쉽게 파악할 수 있도록 상호작용과 함께 디렉토리 구조를 잘 보여주고 있으니
궁금하신 분들은 한번 읽어보시기를 추천드립니다.
Nested Layouts
app-router.vercel.app
'Library,Framework' 카테고리의 다른 글
| Next JS 13 적용해보기 - 데이터 불러오기 Data Fetching 편 (3) | 2023.08.15 |
|---|---|
| [react-notion-x] 노션 컨텐츠 홈페이지에서 불러오기 (feat.NEXT.JS) (7) | 2023.06.06 |
| Next JS 13 적용해보기 - App Routing 편 (2) | 2023.03.05 |
| [Storybook / 스토리북] UI 컴포넌트 테스트 도구 배워보기 (feat. React) - 1편 (0) | 2022.10.21 |
| React Hook Form과 외부 라이브러리 연동하기 (react-select, react-datePicker, antd, mui 등) (3) | 2022.07.22 |