Next.js 13 - 2. 샘플앱 세탁
2023. 8. 29. 12:57ㆍNext.js/생활코딩
Next.js 기본 구조
Next.js에서 기본적으로 제공되는 샘플 앱이 존재할 것이다.
/src/app/layout.tsx - 기본적인 웹페이지의 골격을 구성한다.
// /src/app/layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}필요없는 부분을 제거하면 아래와 같이 된다.
// /src/app/layout.tsx
import './globals.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>{children}</body>
</html>
);
}여기서 body 안에 있는 코드들은 children으로 되어 있다. Next.js는 이 children은 /src/app/page.tsx 파일이 리턴한 값이다. 따라서 샘플 앱을 초기화하기 위해 page.tsx의 return 안의 모든 내용을 지워보자.
그럼 아래와 같은 결과가 나올 것이다.
그런데 내용은 바뀌었지만 스타일은 뭔가 기존의 스타일이 남아있다. 이 부분은 /src/app/layout.tsx 파일에서 globals.css를 import 하고 있기 때문이다. 따라서 이를 해결하기 위해 /src/app/globals.css의 내용을 모두 지워주자. 그럼 아래와 같이 모두 초기화 된 상태로 나올 것이다.
참고자료
생활코딩 - Next.js 13
https://opentutorials.org/course/5098
Next.js 13 - 생활코딩
수업 개요 Next.js는 웹 애플리케이션을 빌드하고 배포하는 데 강력한 도구입니다. 이 도구를 활용하면 모던한 웹 앱을 빠르고 효율적으로 구축할 수 있습니다. 그럼 함께 미래의 웹 개발 패러다
opentutorials.org
'Next.js > 생활코딩' 카테고리의 다른 글
| Next.js 13 - 5. 라우팅 (0) | 2023.08.30 |
|---|---|
| Next.js 13 - 4. 뼈대 만들기 (0) | 2023.08.30 |
| Next.js 13 - 3. 배포 (0) | 2023.08.30 |
| Next.js 13 - 1. 설치와 실행 (0) | 2023.08.29 |
| Next.js 13 - 0. Next.js 란 무엇인가? (0) | 2023.08.29 |