(Next.js) _app, _document & Head

Mirrer·2022년 8월 25일

Next.js

목록 보기

4/10

_app.js

_app.js는 모든 페이지 컴포넌트에 공통으로 적용할 속성 관리

_app.js는 앞선 포스팅에서 소개한 pages폴더와 마찬가지로 Next.js에서 내부적으로 인식하는 컴포넌트이다.

pages폴더 내부에 _app.js를 작성하면 Next.js는 가장 먼저 _app.js를 호출한다.

_app.js는 자체 라우팅이 적용되고 초기에 localhost:3000으로 들어갈 경우 경로가 '/'이므로 index.js의 retrun값을 Component라는 props로 받는다.

그래서 _app.js는 공통적으로 페이지에 레이아웃을 적용할 때 사용한다.

_app.js 예제

Ant Design은 CSS파일을 import하는 것이 불가능하지만 Next.js는 기본적으로 웹팩이 존재하기 때문에 웹팩이 CSS파일을 확인하면 <style>태그로 변경해서 HTML에 삽입한다.

이 과정을 개별 페이지별로 적용하면 중복이 발생한다, 그래서 pages폴더의 공통 파일인 _app.js파일을 생성하여 페이지들의 공통 사항을 적용한다.

// _app.js
import React from 'react';
import PropTypes from 'prop-types';
import 'antd/dist/antd.css'; //  Ant Design의 css파일을 import

// Component는 각각의 페이지들
const ShoppingList = ({ Component }) => {
  return (
    <Component />
  );
};

NodeBird.propTypes = {
  Component: PropTypes.elementType.isRequired,
}

export default ShoppingList;

_document.js

_document.js는 페이지 컴포넌트 HTML의 공통적으로 적용되는 부분을 커스텀

_document.js는 _app.js 다음에 실행되며, 공통적으로 활용할 <head>, <body> 태그 안에 들어갈 내용들을 커스텀할때 사용한다.

_document.js 역시 Next.js에서 인식하는 컴포넌트이며 _document.js가 React에서 index.html의 역활, _app.js는 client.jsx의 역활을 담당한다.

_document.js 예제

_document.js는 주로 font를 import하거나 웹 접근성 관련 태그를 설정할 때 사용한다.

_document.js 작성시에는 Document 클래스를 상속받는 클래스 방식을 사용해야 하며, render()함수는 <Html>, <Head>, <Main>, <NextScript> 요소를 리턴해야 한다.

또한 _document.js에서 사용하는 <Head> 태그에는 모든 페이지에 공통적으로 적용될 내용이 포함되어야 한다.

// _document.js
import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          // 모든 페이지 HTML의 공통적으로 적용되는 부분을 커스텀
          <title>_document Example</title>
          <meta charSet="utf-8"></meta>
          <body>
            <Main />
            <NextScript />
          </body>
        </Head>
      </Html>
    );
  }
}

Head

Next.js는 next/head 컴포넌트를 이용해 페이지의 정보를 제공

Next.js는 검색엔진 최적화(Search Engine Optimization, SEO)를 활용하기 위해 next/head로부터 <HEAD> 태그를 사용하여 페이지에 대한 정보를 웹 크롤러에게 노출한다.

웹 크롤러는 자동화된 방법으로 월드 와이드 웹을 탐색하는 컴퓨터 프로그램으로 HTML문서를 로딩한 뒤에 자바스크립트를 실행하여 변경되는 문서 내용을 탐지한다.

그렇기에 검색엔진 최적화를 하기 위해서는 항상 서버 사이드에서 웹 크롤러에게 노출할 내용을 담아야 한다.

Head 예제

HTML의 head부분을 수정하려면 우선 Next.js에서 제공하는 Head 컴포넌트 import한 뒤 return부분에 Head 컴포넌트를 사용하여 변경사항을 적용한다.

만약 Head 컴포넌트의 수정사항이 공통이면 _app.js파일에, 개별적인 수정사항이면 해당 컴포넌트에 작성한다.

이 때 _app.js, 개별 컴포넌트 둘다 Head가 존재한다면 개별 컴포넌트의 Head가 _app.js의 Head를 덮어씌운다.

// _app.js
import React from 'react';
import PropTypes from 'prop-types';
import 'antd/dist/antd.css';
import Head from 'next/head'; // Head컴포넌트 import

const ShoppingList = ({ Component }) => {
  return (
    <>
      <Head>
        <meta charSet='utf-8' />
        <title>ShoppingList</title>
      </Head>
      <Component />
    </>
  );
};

NodeBird.propTypes = {
  Component: PropTypes.elementType.isRequired,
}

export default ShoppingList;