Next.js(2)
(1)에서 다뤘듯
layout의 return값은
page.js에서 가져온다.
xport const metadata = {
title: "만들어보자", {/* 홈페이지 제목 */}
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html>
<body>
<h1><Link href="/">WEB from layout.js</Link></h1>
<ol>
<li><h1><a href="/read/1">html</a></h1></li>
<li><h1><a href="/read/2">css</a></h1></li>
</ol>
{children}
<ul>
<li><a href="/create">Create</a></li>
<li><a href="/update/1">Update</a></li>
<li><input type="button" value={"delete"}/></li>
</ul>
</body>
</html>
);
}
라우팅(Routing)
https://naver.com/mypage/update/
"naver.com/": 도메인
"mypage/", "update": 세그먼트
세그먼트의 합: path
Routing은 위의 경로에 따라서 어떤것을 보여주는가 를 말한다.
즉 세그먼트에 따라 Next가 해당 경로를 찾아가고
이는 정해진 규칙에 따라 세그먼트폴더 안의"page.js"로 생성 해주어야 한다.
그리고 해당 폴더에
layout.js가 "있다" -> 해당 return을 layout.js
layout.js가 "없다" -> 상위 폴더로 이동하여 같은 작업 실행
layout.js가 "있다"면 props({children})에 해당 page를 구현한다.
다른 경로에 layout.js가 있을 수 있다.
그러한 경우 props를 가지며 props.children을 통해
"/"에 있는 layout.js처럼 해당 page.js를 실행한다.
즉
layout.js{ {/*"/"*/}
children{
layout.js{ {/*"/"other"/"*/}
props.children{
page.js
}
}
}
}
5_hero_like