Node
Next.js
넥스트 시작하기

넥스트 시작하기

넥스트 프로젝트 생성

npx create-next-app@latest

맨 아래에 나오는 옵션은 import를 할 때 src 폴더를 기본인 @로 사용할 것인지 *로 사용할 것인지를 묻는 옵션이다.

Next 프로젝트 구조

layout.tsx/RootLayout

페이지의 레이아웃을 담당하는 컴포넌트. 해당 function의 children부분에 들어가는 것은 page.tsx의 Component가 들어가게 된다.

layout.tsx/RootLayout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

이 때 각 폴더별로 layout을 만들어서 사용해줄 수 있는데 그룹별로 layout을 만들어서 사용하고 싶을 때는 폴더를 만들고 폴더 명을 소괄호, (폴더명) 👈 이렇게 지정한 후 그 안에 layout.tsx를 만들어줘서 그룹별로 만들어줄 수 있다.

ℹ️

폴더명을 소괄호를 사용해서 묶어주게 되면 해당 폴더는 url에 영향을 주지 않는다.

layout과 template의 차이

페이지를 넘나들 때마다 re-rendering이 되게 하고 싶으면 template.tsx을 사용하고 re-rendering이 되지 않게 하고 싶으면 layout.tsx를 사용하면 된다.