생활코딩

Coding Everybody

뼈대 만들기 - layout & page

토픽 생활코딩 > WEB > WEB2 - JavaScript > React > Next.js 13

앞으로 제작 할 앱의 기본 뼈대를 세워보겠습니다. 

미리보기

라이브 예제

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',
}

댓글

댓글 본문
  1. layout, metadata수정
  2. Hoon Ko
    20231018
  3. 딸기공방
    230912
  4. Hoon Ko
    20230905
  5. 어흥
    230813