nextJs랑 비슷하지만 app폴더가 생겼다는 부분만 주목해서 보면될것 같다
page.tsx or page.js or page.jsx 를 토대로 페이지를 만들고 폴더로 구분해서 라우팅을 한다. 폴더에 ( ) 로 wrapper되어있으면 라우팅에 적용하지 않는 폴더가 된다.
page의 경로는 ‘/’가 된다
특이한것은 layout이 기존의 nextjs랑 다르게 내부 기능으로 들어왔다는 것이다 layout.tsx를 생성하면 자동으로 해당 경로의 레이아웃이 적용되게 된다.
기존과 바뀐점은 루트레이아웃을 nextjs가 설정하지 않기 때문에 가장 상위의 layout에서 html부터 정의해 주어야 한다 이 루트레이아웃은 기존의 _app.js및 _document.js 파일을 합친것과 같다
export const metadata = {
title: "NodeBird",
description: "NodeBird with NextJs 13 beta",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}