[TIL] Next.js #5 _app.tsx 와 _document.tsx, 그리고 Layout.tsx

Leesu·2023년 2월 3일

next.js

Next.js_Blog

목록 보기

9/10

페이지 구조를 정의하는 파일에 대해 알아보자 :)

들어가기에 앞서

_app.tsx 는 공통적인 레이아웃을 가진 모든 페이지에서 사용될 템플릿이라고 생각하면 편하다. 예를 들어, 헤더, 푸터 등.
_document.tsx 는 HTML 문서 전체에 적용될 공통적인 스타일, 스크립트, 메타 데이터 등을 정의하는 곳이다.
그래서 Next.js 에서 페이지를 만들 때 _app.tsx 와 _document.tsx 를 작성하여 공통적인 레이아웃 및 문서 정의를 적용할 수 있다!

_app.tsx

❗ 공식문서

_app.tsx 는 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트이다.
- 즉, Next.js 가 가장 먼저 찾고, 실행시키는 파일!
- 모든 페이지에서 공통적인 레이아웃을 만들때 사용된다.
- 글로벌 CSS는 _app.tsx 에서만 적용이 가능하다!

- 사용방법

TypeScript 를 사용하지 않는 경우

import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

TypeScript 를 사용하는 경우

import "../styles/globals.css";
import type { AppProps } from "next/app"; <<<---

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

- 속성값

Component
- 현재 렌더링되고 있는 페이지를 전달하며, 페이지 변경 시 해당 Component는 변경된다.
pageProps
- prop은 페이지 컴포넌트에 props를 전달하는데 사용된다.
  getInitialProps, getStaticProps, getServerSideProps 중 하나를 통해 패칭한 초기 속성값이 전달된다.
예시로, 아래와 같이 _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.tsx

❗ 공식문서

Layout 컴포넌트는 공통적으로 사용되는 UI 요소를 감싸는 컴포넌트이다.
예를 들어, 헤더, 푸터, 사이드바 등을 포함하는 레이아웃을 정의할 수 있으며
각 페이지 컴포넌트에서 재사용할 수 있어 중복된 코드를 줄일 수 있다.
참고로, TypeScript 를 사용하는 부분이 다를 수 있습니다.

- 사용방법

TypeScript 를 사용하지 않는 경우

// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

TypeScript 를 사용하는 경우
(공식문서와 다릅니다. 저는 이 방법이 간단하여 이렇게 했습니다. 하지만 공식문서를 따르도록 하자...)


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} 자리에 들어가는것.

_document.tsx

❗ 공식문서

_app.tsx 다음으로 실행되는 파일이다.
HTML 문서를 커스터마이징 할 수 있는 컴포넌트.
공통적으로 사용할 head, meta(뷰포트) 정보, body 등을 커스터마이징 할 수 있다.
서버에서 실행되는 파일이므로 API 나 이벤트 핸들러는 실행되지 않는다.

- 사용방법

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>
  );
}