넥스트 시작하기
넥스트 프로젝트 생성
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를 사용하면 된다.