Next.js 13 - 4. 뼈대 만들기
2023. 8. 30. 15:01ㆍNext.js/생활코딩
Next.js 뼈대 만들기
만약 이전 글을 보고 start가 실행 중이라면 끄고 dev를 다시 실행하자.
웹을 소개하는 튜토리얼 사이트를 만들어본다고 하자. 처음에 접속하면 웰컴 메시지를 보여준다고 할 때 이 컨텐츠는 어디서 가져올까? 바로 src/page.tsx가 리턴하는 값이다.
이 컨텐츠만이 아니라 어떤 페이지로 이동할 수도 있다. 그런데 어떤 페이지를 이동하던 공통된 내용을 가지고 있다면 공통된 내용을 다루는 src/layout.tsx에서 관리하는 것이 훨씬 더 효율적이다.
아래와 같이 뼈대를 만들어 CRUD를 위한 기본 틀을 만들 수 있다.
// /src/app/page.tsx
import Image from 'next/image';
export default function Home() {
return (
<>
<h2>Welcome</h2>
Hello, WEB!
</>
);
}
// /src/app/layout.tsx
import './globals.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Web tutorials',
description: 'Generated by byein',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
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/1'>Update</a>
</li>
<li>
<input type='button' value={'delete'} />
</li>
</ul>
</body>
</html>
);
}
metadata
웹의 타이틀과 설명을 바꾸기 위해서 metadata를 변경할 수 있다.
layout.tsx 혹은 page.tsx에서 metadata를 export하면 html의 head 안에 내용을 생성할 수 있다.
참고자료
생활코딩 - Next.js 13
https://opentutorials.org/course/5098
Next.js 13 - 생활코딩
수업 개요 Next.js는 웹 애플리케이션을 빌드하고 배포하는 데 강력한 도구입니다. 이 도구를 활용하면 모던한 웹 앱을 빠르고 효율적으로 구축할 수 있습니다. 그럼 함께 미래의 웹 개발 패러다
opentutorials.org
'Next.js > 생활코딩' 카테고리의 다른 글
| Next.js 13 - 6. Single Page Application (0) | 2023.08.30 |
|---|---|
| Next.js 13 - 5. 라우팅 (0) | 2023.08.30 |
| Next.js 13 - 3. 배포 (0) | 2023.08.30 |
| Next.js 13 - 2. 샘플앱 세탁 (0) | 2023.08.29 |
| Next.js 13 - 1. 설치와 실행 (0) | 2023.08.29 |