Next js Custom App , global style, _app.js

글로벌 스타일링

css 를 작성하면 공통적으로 적용할 reset style, global style 등이 있을겁니다.

styled jsx에서는 scoped 된 스타일 작성말고 global한 스타일을 적용할수 있습니다.

 

놀랍게도 글로벌 스타일링을 아주 간단하게 작성할 수 있습니다.

다음과 같이 styled jsx 태그에 global 프로퍼티를 추가해주면 됩니다.

export default function Home() {
  return (
    <div>
      <NavBar />
      <h1>hello</h1>
      <style jsx global>{`
        a {
          color: white;
        }
      `}</style>
    </div>
  );
}

그럼 다음과 같이 NavBar 안에 있는 a 태그에 white 색상이 적용이됩니다.

이것조차 scoped 된 스타일링

Home 컴포넌트인 index 페이지에서 만든 styled jsx global css는 인덱스 페이지에서는 적용이 되었지만,

About 컴포넌트 About페이지를 보면 아래 사진과 같이 white 색상이 적용이 안된것을 확인할 수 있습니다.

해결방법은 Home 컴포넌트에 똑같이 style 코드를 붙여넣어주면 되겠지만,

동일한 동작을 하는 보일러플레이트 코드가 추가되어 줄만 길어질뿐입니다.

 

또한 노마드코더분은 NavBar 또한 Home, About에서 동일하게 동작하는 컴포넌트인데 불필요하게

작성을 해주는 불편함을 설명해주고 있습니다.

 

_app.js

이러한 점을 해결하기 위해 Next js에서는 pages 폴더에서 _app.js를 제공하고있습니다.

Next js 가 _app.js 를 먼저 읽어서 페이지에 공통으로 내부 요소들을 붙여줄 수 있습니다.

 

먼저 pages 폴더에 _app.js 파일을 생성해줍니다.

!!!!! 반드시 이름을 지켜야합니다(Next js는 프레임워크입니다.)

 

_app.js 구조 살펴보기

export default function App(props) {
  console.log(props);

  return (
    <>
    </>
  );
}

_app.js 에 위와 같이 코드를 작성하고 props를 콘솔로 찍어보면

다음 사진과 같은 object 형식의 값들이 담겨져있습니다.

Component , pageProps

Component는 Pages에 해당하는 파일들의 Component를 받아오고

pageProps는 해당하는 페이지의 props를 받아오는걸로 보입니다.

 

따라서 다음과 같이 구조를 작성해봅니다.

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <span>hello _app.js</span>
    </>
  );
}

위와 같이 작성하면 아래 사진과 같이 기존 pages의 해당하는 컴포넌트들을 보여주고

span으로 작성한 글씨는 아래에 공통적으로 붙여지며 보이게 됩니다.

이걸로 보면 공통으로 쓰는 코드들과 NavBar을 이 _app.js에 작성하면 되지않을까라는 생각을 할 수 있습니다.

 

NavBar(네비게이션), 공통요소 _app.js에 옮기기

_app.js 를 다음과 같이 NavBar을 넣은채로 작성합니다.

import NavBar from "../components/NavBar";
export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  );
}

또한 index.js 에 있었던 글로벌 style도 _app.js 에 붙여줍니다.

import NavBar from "../components/NavBar";
export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <style jsx global>{`
        a {
          color: white;
        }
      `}</style>
    </>
  );
}

이제 index 페이지, about 페이지에서도 네비게이션, 공통스타일이 같이 적용이 되는것을 확인할 수 있습니다.

css 파일로 적용하기

다음과 같이 reset css 를 적용하고싶어서 index.js 에다가 import를 하면

import "../styles/globals.css";
export default function Home() {
  return (
    <div>
      <h1>hello</h1>
    </div>
  );
}

다음과 같이 오류를 발생시키는데 Custom App 이외의 파일로부터는 임포트 할 수 없다고 합니다.

따라서 css module를 임포트하거나 _app.js 에 임포트 하라는 말로 설명이 나옵니다.

 

따라서 css 파일 자체를 임포트 시키고 싶으면 _app.js 에 파일을 임포트해옵니다.

다음 사진과 같이 작성하면 css 를 파일로 적용시킬 수 있습니다.

 

 

* 아래 사진은 _app.js를 처음 생성하게되면 뜨는 팝업창인데,

처음 생성하고 Next js가 읽어들이기위해 Reload를 해줘야하는걸로 보입니다.

Reload를 누르면 _app.js 를 만든것이 적용이 됩니다.