앞으로 제작 할 앱의 기본 뼈대를 세워보겠습니다.
미리보기
라이브 예제
https://nextapp-ijmto6ane-egoing.vercel.app/
소스코드
https://github.com/egoing/nextapp/commit/286a94822e9c2317e9018193c1fe9f71be470408
콘텐츠
app/page.js
export default function Home() {
return (
<>
<h2>Welcome</h2>
Hello, WEB
</>
)
}
레이아웃
app/layout.js
import './globals.css'
export const metadata = {
title: 'WEB tutorial',
description: 'Generated by egoing',
}
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>
)
}
metadata
layout.js 혹은 page.js에서 metadat를 export하면 html의 head 안에 내용을 생성할 수 있습니다.
app/layout.js 중 일부
export const metadata = {
title: 'WEB tutorial',
description: 'Generated by egoing',
}
