[NEXT.JS] #6 _app.js

이전 글에 이어 _app.js를 커스텀하는 방법에 대해 작성해 보려고 한다.

[NEXT.JS] #5 CSS STYLING (2)

_app.js

Next.js에서 각각의 페이지가 초기화될 때 로딩되는 파일이다.

모든 페이지가 초기화될 때 로딩되므로 전체 페이지의 로직을 작성할 수 있다.

즉, 모든 페이지에서 공통으로 사용하는 컴포넌트나 css 등을 적용하는데 용이하다.

 

이전 게시물들에서 NavBar.js를 index.js, text.js에 각각 호출해서 적용을 해줬는데, 이는 코드의 중복으로 볼 수 있다.

_app.js에 NavBar.js와 공통 css를 적용해 보겠다.

import NavBar from "@/components/NavBar";

export default function App({ Component, pageProps }) {
  return (
      <>
      <NavBar />
      <Component {...pageProps} />
      <style jsx global>{`
      a {
        font-size: 30px;
      }
      `}</style>
      </>
  )
}

 

 

style jsx global을 통해 전체css를 적용하여 폰트 사이즈를 조절하였다.

 

 

⌘ 문의사항이나 피드백은 언제나 환영합니다.