중첩 라우팅
현재 app 폴더 안에 daschboard 폴더가 있고 그 안에 invoices폴더가 있다.
즉 비유하면 app이 할머니, daschboard가 엄마/ invoices가 손자
기존에 app파일 안에 있는 page.tsx파일은 개발 시 홈페이지가 되고 경로는 '/'가 된다.
중첩 경로를 만들 때는 폴더를 서로 중첩하고 page.tsx 파일을 추가할 수 있다.
예를 들어 app 파일 안에 login 폴더를 만들고 그 안에 page.tsx파일을 만들었다.
export default function LoginPage() {
return <p>Login Page</p>;
}이렇게 되면
이런식으로 'http://localhost:3000/login'
주소+폴더이름이 경로가 된다!
또한
import "./globals.css";
import { Inter } from "next/font/google";
export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<main>
<h1>이거 공통이야!</h1>
{children}
</main>
</body>
</html>
);
}
layout.tsx에 h1태그로 '이거 공통이야!'라는 문구를 모든 페이지에 적용할 수 있다.
즉 layout.tsx는 여러 페이지에서 공유되는 UI를 만들 수 있다.
그래서 보통 네브바와 같이 모든 페이지에 사용되는 컴포넌트를 넣으면 편리하다.
확인 하면 어떤 페이지를 가도 문구가 나타나게 된다!
