페이지 구조를 정의하는 파일에 대해 알아보자 :)
_app.tsx
는 공통적인 레이아웃을 가진 모든 페이지에서 사용될 템플릿이라고 생각하면 편하다. 예를 들어, 헤더, 푸터 등._document.tsx
는 HTML 문서 전체에 적용될 공통적인 스타일, 스크립트, 메타 데이터 등을 정의하는 곳이다._app.tsx
와 _document.tsx
를 작성하여 공통적인 레이아웃 및 문서 정의를 적용할 수 있다!❗ 공식문서
_app.tsx
는 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트이다.import "../styles/globals.css";
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
import "../styles/globals.css";
import type { AppProps } from "next/app"; <<<---
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
Component
pageProps
예시로, 아래와 같이 _app.tsx
에서 헤더, 푸터 등을 미리 정해줄 수 있는데,
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<header>
<h1>Header</h1>
</header>
<Component {...pageProps} />
<footer>
<p>Footer</p>
</footer>
</>
)
}
Layout.tsx
을 사용해보자!
❗ 공식문서
Layout
컴포넌트는 공통적으로 사용되는 UI 요소를 감싸는 컴포넌트이다.// components/layout.js
import Navbar from './navbar'
import Footer from './footer'
export default function Layout({ children }) {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
import React from "react";
import Footer from "./Footer";
import NavBar from "./NavBar";
export default function Layout({ children }: React.PropsWithChildren) {
return (
<>
<NavBar />
<div>{children}</div>
<Footer />
</>
);
}
_app.tsx
import type { AppProps } from "next/app";
import Layout from "../components/Layout";
import "../styles/globals.css";
export default function App({ Component, pageProps }: AppProps) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
children
children
props를 사용하여 렌더링한 자식 컴포넌트들은{children}
자리에 들어가는것.❗ 공식문서
_app.tsx
다음으로 실행되는 파일이다.import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
<link>
태그를 사용해 브라우저 대표 아이콘을 설정해주고,<meta>
태그를 사용해 뷰포트를 설정했다. export default function Document() {
return (
<Html lang="en">
<Head>
<link rel="icon" href="/N_logo.svg" />
<meta name="viewport" content="width=device-width" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}