nextjs 폴더와 파일 구조

by

nextjs 기본 구조를 만들고 나서 폴더를 만들어서 작업해봅시다.

용도에 따라서 구분해서 작업 하고 싶은 경우가 있을 수 있고 특정 페이지에 따른 테마를 구분 할 수도 있을텐데요. 그럴때 괄호를 사용 할 수 있어요.

/app/page.tsx 파일이 기본으로 있는데 이 파일을 지우고 (marketing) 폴더를 만들어서 page.tsx 파일을 넣어도 동작 합니다. 괄호를 이용해서 여러 페이지를 구분하고 나누고 레이아웃을 그 폴더별로 할 수 있어요.

/app/(marketing)/page.tsx

const MarkingPage = () => {
  return (
    <div className="flex items-center justify-center flex-col">
      Landing Page
    </div>
  )
}

export default MarkingPage;

/app/(marketing)/layout.tsx

const MarketingLayout = ({
  children
}:{
  children: React.ReactNode
}) => {
  return <div className="h-full bg-slate-100">
    {/* Navbar 영역 */}
    <main className="pt-40 pb-20 bg-slate-100">
      {children}
    </main>
    {/* Footer 영역 */}
  </div>
}

export default MarketingLayout;

Leave a Comment