[Next JS] Layout (feat. RouteGroup)

728x90

SMALL

1. Layout

2. Root Layout

3. 공통된 경로로 시작되지 않는 page에 동일 Layout 설정법

방법

1. Layout

- 특정 폴더 아래 layout.tsx라는 파일을 만들게 되면,

해당 layout 파일은

폴더 안에 있는 모든 page 컴포넌트에

똑같이 적용되는 Layout을 정의하게 되는 것!

/search/setting/page.tsx 이지만,

=> search 하위의 Layout이 레이아웃으로 적용!

↑

그렇다면,

- /search / layout.tsx 에도 레이아웃이 존재하고,

- /search / setting / layout.tsx 하위 폴더인 setting에도 레이아웃이 존재하면?

=> 중첩 Layout이 되어 나타나게 된다.

2. Root Layout

프로젝트를 처음 마주하면, app / layout.tsx 파일을 보게 된다.

=> 이는 Global Layout 또는 Root Layout으로 Next.js 앱의 모든 페이지에 공통적으로 적용이 되는 레이아웃

=> 결코 없어져서는 안 되고, name을 변경하거나 삭제하면 자동으로 생성이 된다.

# app/layout.tsx (root layout)

export default function RootLayout({ children,}: Readonly<{children: React.ReactNode;}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

- children props로 현재 page의 역할을 할 page 컴포넌트를 전달받아서

- return 문 내부에서 <html> 내부, <body> 내부에 {children} 으로 page 컴포넌트를 렌더링 한다.

(TIP)

Layout.tsx로 생성한 레이아웃은 자동으로 'children'이라는 props를 통해

현재 page 컴포넌트가 전달이 될 수 있게 되어있어서 가져다 쓰고,

return문 안에 page 컴포넌트를 어디에 배치할 건지 직접 설정을 해줘야한다.

import {ReactNode} from "react";

export default function Layout({ children }: {children: ReactNode}) {
  
  return (
    <>
    <div> 임시 서치바 </div>
      {children}
    </>
  );
}

- { children } props 타입정의를 해줘야하는데,

- { children }: { } =====> 객체인데,

- { children }: {children: } =====> children을 포함하는 객체이면 되고,

- { children }: {children: ReactNode} =====> ReactNode 타입이다.

3. 공통된 경로로 시작되지 않는 page에 동일 Layout 설정법

⭐️ " RouteGroup " : 경로상에는 아무런 영향을 미치지 않는 폴더 의미

=> app / ('xxxx') : app 하위에 소괄호 () 로 만든 폴더

- 경로상 영향을 미치지 않고도 서로 다른 경로의 page에 layout을 적용 O

- (with-searchbar) 라는 RouteGroup을 만들었음. (app 하위 존재)

ㄴ> root page.tsx 컴포넌트 이동

ㄴ> 특정 layout.tsx 컴포넌트 이동 (경로 무관 지정할)

=> root page와 /search page 모두에 동일한 레이아웃이 지정됨!

=> RouteGroup 밖의 /book page는 공통 레이아웃 X

728x90

LIST

저작자표시 (새창열림)

'💻 DEV > NextJS' 카테고리의 다른 글

[Next JS] searchbar 만들기 (feat. co-location) (0)	2025.08.30
[Next JS] 리액트 서버 컴포넌트 (feat. FCP, TTI) (1)	2025.08.30
[Next JS] 동적경로 라우팅 : 폴더/[ ]/page.tsx (feat : Catch all segment, optional catch all segment) (0)	2025.08.27
[Next JS] queryString (1)	2025.08.27
[NEXT.js] 5. Link 컴포넌트 사용 이슈 ( new- link ) (0)	2024.06.19

EveryDay, EveryPyeon

[Next JS] Layout (feat. RouteGroup)

'💻 DEV > NextJS' 카테고리의 다른 글

댓글

티스토리툴바

[Next JS] Layout (feat. RouteGroup)

'💻 DEV > NextJS' 카테고리의 다른 글

관련글

댓글

티스토리툴바