Next.js의 _app.js와 _document.js 파일의 차이점

4943 단어 htmlnextjsreactjavascript

소개



Next.js는 React.js 위에 구축된 프레임워크이며, Next.js 팀은 이를 프로덕션용 React 프레임워크라고 불렀습니다. 이 프레임워크를 사용하면 React 애플리케이션에서 SSG , ISR 및 SSR 전략을 최적화할 수 있습니다.

이 기사에서는 Next.js에서 _app.js과 _document.js 파일의 차이점이 무엇인지 알 것입니다.
그럼 시작하겠습니다... 👉

_app.js 파일



새 Next.js 프로젝트를 생성하면 페이지 디렉토리에 _app.js라는 파일이 있음을 알 수 있으며 파일을 열면 다음 코드가 표시됩니다.

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

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

export default MyApp


app.js 파일의 이름을 다음 앱의 모든 구성 요소의 루트로 지정할 수 있습니다. 즉, 페이지 디렉토리에서 생성할 모든 페이지가 이동하여 MyApp 구성 요소를 발생시킵니다.
이것은 아름다운 기능입니다.
  • Navbars 및 Footers...등과 같은 모든 프로젝트 페이지에 전역 레이아웃 구성 요소를 추가할 수 있습니다.
  • 모든 페이지 throwHead 구성 요소에 기본 메타 태그를 추가할 수도 있습니다.

    • _document.js 파일



    이 파일은 유명한 _app.js 파일과 달리 많은 Next.js 개발자들에게 알려지지 않은 파일이며, 사용 빈도가 낮기 때문입니다. 또한 이를 사용하려면 생성해야 합니다.

    _document.js 파일을 사용하면 다음 앱에서 기본 HTML 구조를 덮어쓸 수 있습니다.
    방법을 알아보자...

    Pages 디렉토리에 js 파일을 만들고 이름은 "_document.js"로 지정하고 다음 코드를 넣습니다.

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;


    이것은 앱에서 HTML의 기본 구조입니다. 이제 lang 속성을 html 태그에 추가하는 등 편집할 수 있습니다.

    ❗️Notice that

    • _document.js lets you edit only html code structure which means that you can't add javascript events in it.
    • Head Component in _document.js is Completely different from Head in _app.js file



    결론



    전역 레이아웃 또는 메타 태그를 추가해야 하는 경우 _app.js 파일을 사용하고 HTML 코드의 기본 구조를 편집해야 하는 경우에만 _document.js 파일을 사용하십시오.
    선 위를 따라 가고 있는지 확인
    문자열에서 각 단어의 첫 글자를 대문자로 표시하는 방법은 무엇입니까?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage