Next.js | 스타일 적용과 _App

📍 NextJS에 스타일 적용

컴포넌트의 태그 안에 스타일을 직접 추가할수도있다. 하지만 인라인 스타일로 적용하는 것은 코드의 가독성 뿐만 아니라 효율적으로 관리할수 없다.

#1. 태그 안에 직접 적용

컴포넌트와 동일한 경로에 XXXX.module.css 파일을 생성하고 그 안에 일반적인 CSS를 작성하는 방법과 동일하게 작성한다.
그리고 적용 할 컴포넌트 안에서 해당 CSS를 styles로 불러와 클래스네임에 객체스타일로 원하는 클래스를 넣으면 브라우저에서는 랜덤의 이름으로 클래스를 부여하여 충돌할 걱정이 없다.

여러개의 클래스를 추가하는 방법은 다양하다.

백틱과달러사인을 이용해 변수로 넣을 수도 있고, 배열로 넣어 join 함수를 이용해 결합시킬수도있다.

#2. styled jsx로 적용

일반 html처럼 style태그를 열어주는데 속성에 jsx 를 추가하고 내용에 중괄호 를 열고 CSS를 작성하면 해당 컴포넌트에 작성한 스타일이 적용된다.

하지만 index컴포넌트에서는 NavBar컴포넌트에서 작성한 스타일이 적용이 되지 않는다. 이때 index컴포넌트에서 전역적으로 스타일 을 작성하면 된다.

전역적으로 스타일을 적용하는 법은 간단하다. jsx 속성 뒤에 추가로 global 속성만 추가 해주면 된다.

index컴포넌트에 전역적으로 스타일을 적용했지만 다른 컴포넌트의 경우 페이지가 독립적으로 존재하기 때문에 전역 스타일이 적용되지 않는다.

📍 Custom App Component

서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 한다.

전역적으로 적용되는 컴포넌트를 Customizing 하기위해서 pages폴더 안에 _app.js 파일을 생성한다. (언더스코어 _ 중요)

NextJS로 _app.js 내의 App함수 호출을 하면서 렌더링 할 특정컴포넌트를 첫번째 prop으로 넣어준다.

모든 컴포넌트에 공통으로 적용할 속성 관리를 목적으로 한다.

Component라는 prop을 받아 호출해주면 레이아웃 구성이 가능하고, 전역적으로 스타일도 적용 시킬 수 있다.

규칙

1. Component 속성값은 서버에 요청한 페이지가 된다.
   예) http://localhost:3000/home 에 접속하면 Component는 home 컴포넌트를 가리킨다.
2. pageProps는 getInitialProps getStaticProps getServerSideProps 중 하나를 통해 Fetching한 초기 속성값이 된다.
3. _app 에서도 getInitialProps 를 사용해 모든 페이지에서 사용할 공통 속성값을 지정할 수 있으나 이럴 경우에는 자동 정적 최적화(Automatic Static Optimization)가 비활성화되어 모든 페이지가 SSR을 통해 제공된다.
4. 만약 _app 에서 getInitialProps 를 사용하고자 하면 반드시 아래처럼 App 객체를 불러온 후 getInitialProps 를 통해 데이터를 불러와야 한다.