하고 싶은 것은 웹을 소개하는 튜토리얼 사이트를 만들고 싶습니다.
컨텐츠
첫번째로 웹을 방문하면 welcome 메시지를 보여줄 것입니다.
그 컨텐츠는 page.js가 리턴하는 값이 그 컨텐츠이기에 page.js를 수정해보지만 이 컨텐츠만으로는 안될 것입니다.
다른 페이지도 보고 글을 생성 및 수정하는 기능 또한 보여줘야할 것입니다.
//page.js
import Image from "next/image";
export default function Home() {
return (
<>
<h2>Welcome</h2>
Hello,WEB!
</>
);
}레이아웃
근데 어떤 페이지를 가더라도 내용은 공통된 내용이기에 그런 것들은 공통된 내용을 다루는 layout에서 관리하는 것이 훨씬 더 효율적일 것 입니다. 그렇기에 layout.js를 수정해야 합니다.
//layout.js
import './globals.css'
export const metadata = {
title: 'WEB tutorial',
description: 'Generated by du',
}
export default function RootLayout({ children }) {
return (
<html>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
<li><a href="/read/1">html</a></li>
<li><a href="/read/2">css</a></li>
</ol>
{children}
<ul>
<li><a href="/create">create</a></li>
<li><a href="/update/id">update</a></li>
<li><button>delete</button></li>
</ul>
</body>
</html>
)
}이렇게 되면 웹에서 html페이지와 css페이지로 이동할 수 있으며 create, update,delete를 통해 글을 생성, 업데이트 및 삭제를 할 수 있게 됩니다.
metadata
이제 타이틀은 어떻게 처리하면 될지 궁금해지는 상황입니다.
그때는 이제 metadata라는 상수를 export합니다.
export const metadata = {
title: 'WEB tutorial',
description: 'Generated by du',
}layout.js 혹은 page.js에서 metadata를 export하면 html의 head안에 내용을 생성할 수 있게 됩니다.
