App Router에서 공통 Layout을 로그인 페이지에서 안보이게 하려면? (feat Router Grop)

헤더나 푸터같은 공통된 layout들은 보통 페이지 마다 작성하는게 아니라 하나의 컴포넌트를 최상단 컴포던트에 감싼다 그러나 특정페이지 예를들어 로그인 페이지같은 페이지들은 layout을 제외 시킬때가 종종 있다. React에서는 outlet 을 사용하면 되고 page Router에서는 _app.tsx에서 router라는 props를 가지고 제외하면 되지만 appRouter는 Router Grop을 이용하여 제외한다. 

 

보통 app router에서는 layout.tsx파일을 통해 layout을 만든다.

app폴더에 있는 layout.tsx.파일은 전체 라우팅에 관여하는 layout이다 만약 layout을 특정페이지에서 변경할 필요가 없다면 이곳에 {children}을 감싸서 layout을 적용시킬 수 있다. 

 

그러나 특정페이지에서 layout을 제외시키려면 app폴더의 layout.tsx파일에 만드는것이 아니라 router grop안에 layout.tsx파일을 만들어 사용하면 된다. (파일이름은 layout.tsx로 지정해야 한다. next에서 이렇게 하라고 함)

 

Router Grop

router grop이란 routing을 할때 구룹을 만들어 routing을 할 수 있다. 

 

방법

폴더를 생성할 때 ()를 사이에 작명을 하면 된다. 그러면 ()로 감싼 폴더는 Routing되지 않는다. 

폴더에는 (noAuth)가 있지만 실제 url에는 (noAuth)가 없다

 

(noAuth)/layout.tsx

import { Inter } from 'next/font/google'
import '../globals.css'
import Header from '@/app/header/page'


export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      <Header />
      {children}
    </div>
  )
}

 

 

(auth)/layout.tsx

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import '../../globals.css'


export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      {children}
    </div>
  )
}

noAuth 그룹에는 header 컴포넌트가 있지만 auth 그룹에는 header컴포넌트가 없다

이런식으로 특정 레이아웃을 추가하거나 제외시키고 싶을때 router grop을 이용하면 된다.