Next.js 실행
npm run dev를 통하여 next.js를 실행- 터미널에서 나오는 local host를 통하여 실행화면 접속
Layout 세탁
layout.js가 웹페이지의 기본적인 골격을 구성합니다.
레이아웃은 모든 페이지가 공유하는 HTML 코드가 담겨 있습니다. 이걸 세탁하면서 처음부터 새로 시작해봅시다!
//layout.js
import "./globals.css";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html>
<body> {children}</body>
</html>
);
}Content 세탁
레이아웃에 포함될 콘텐츠가 담겨 있습니다. 이 부분을 세탁해서, 우리만의 내용으로 채워봅시다.
코드 중 {children}은 page.js에서 나오는 것입니다.
import Image from "next/image";
export default function Home() {
return <>Hello, Nextjs!</>;
}global css 세탁
마지막으로, 모든 사이트에 적용된 디자인이 src/app/global.css에 담겨 있습니다. 이것은 마치 책의 디자인과 같은 것이죠. 이 파일의 모든 내용을 지워서, 우리만의 디자인을 적용해봅시다!
- src/app/global.css 파일의 모든 내용을 지워줍니다.
이제, Nextjs 앱의 세탁이 완료되었습니다.
