React & Next.js

Next.js에서 _app.tsx와 _document.tsx 파일의 역할 이해하기

0

Next.js는 React를 기반으로 한 강력한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. Next.js를 사용하면 성능 최적화와 SEO 개선이 용이해집니다. 이 블로그 글에서는 Next.js의 핵심 파일인 _app.tsx와 _document.tsx의 역할과 사용법을 자세히 설명하겠습니다.

_app.tsx와 _document.tsx 파일이란?

Next.js에서 _app.tsx와 _document.tsx 파일은 애플리케이션의 루트와 HTML 문서 구조를 정의하는 중요한 파일입니다. 이 두 파일을 적절히 활용하면 애플리케이션의 전반적인 구조와 동작을 더 효율적으로 관리할 수 있습니다.

_app.tsx 파일의 역할

_app.tsx 파일은 Next.js 애플리케이션의 전체 레이아웃을 제어하는 파일로, 모든 페이지에 공통적으로 적용될 설정이나 레이아웃을 정의할 수 있습니다.

주요 기능

  • 페이지 전환 유지: 각 페이지 간의 상태를 유지하거나 전환 애니메이션을 추가할 수 있습니다.
  • 전역 스타일 적용: CSS, CSS-in-JS 라이브러리, TailwindCSS 등 전역 스타일을 적용할 수 있습니다.
  • 공통 레이아웃 설정: 모든 페이지에 공통된 레이아웃 컴포넌트(헤더, 푸터 등)를 포함시킬 수 있습니다.
  • 상태 관리: Redux, MobX, Context API 등을 사용한 전역 상태 관리를 설정할 수 있습니다.

예시 코드

import { AppProps } from 'next/app';
import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

이 코드는 모든 페이지에 공통적으로 적용되는 스타일을 설정하고, 페이지 컴포넌트를 렌더링하는 기본적인 _app.tsx 파일의 예시입니다.

_document.tsx 파일의 역할

_document.tsx 파일은 HTML 문서의 구조를 제어하는 파일로, 서버 사이드에서 한 번만 렌더링됩니다. 이 파일을 통해 HTML 문서의 `<html>`, `<head>`, `<body>` 태그를 직접 수정할 수 있습니다.

주요 기능

  • 메타 태그 설정: SEO를 위해 기본 메타 태그, 타이틀 등을 설정할 수 있습니다.
  • 폰트 로딩: 외부 폰트를 로딩하는 스크립트나 링크를 추가할 수 있습니다.
  • 전역 스타일 주입: 서버 사이드 렌더링 시 스타일을 주입하여 스타일이 깨지지 않도록 할 수 있습니다.
  • HTML 구조 커스터마이징: HTML 구조를 커스터마이징하여 특정 요구사항을 충족할 수 있습니다.

예시 코드

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

이 코드는 구글 폰트를 로딩하고, HTML 문서의 기본 구조를 정의하는 _document.tsx 파일의 예시입니다.

요약

  • _app.tsx: 애플리케이션의 공통 레이아웃과 설정을 정의하는 파일로, 페이지 전환 유지, 전역 스타일 적용, 공통 레이아웃 설정 등에 사용됩니다.
  • _document.tsx: HTML 문서의 구조를 정의하는 파일로, 메타 태그 설정, 폰트 로딩, 전역 스타일 주입 등에 사용됩니다.

이 두 파일을 잘 활용하면 Next.js 애플리케이션의 전반적인 성능과 SEO를 최적화할 수 있습니다. Next.js를 사용하면서 _app.tsx와 _document.tsx 파일의 역할을 이해하고 적절히 활용해보세요.

Next.js에 대해 더 알고 싶다면 Next.js 공식 문서를 참조하세요.

답글 남기기