[Nextjs] 전역 스타일 적용하기(global css)

티스토리 뷰

Web/nextjs

[Nextjs] 전역 스타일 적용하기(global css)

HAN_PY 2023. 9. 16. 02:00

nextjs 한 번의 설정으로 모든 파일에서 사용할 수 있는 global css 적용하는 방법에 대해 알아보자. Nextjs가 12 버전에서 13 버전으로 업데이트되면서, 디렉터리 구조가 co-location이 강화된 형태로 많이 변경되었다. 따라서 특정 간단히 12 버전에서 전역 스타일 적용 방식을 알아보고, 13 버전으로 넘어가도록 하겠다

Nextjs 12. 전역 스타일 적용하기

13 버전 초반 버전까지도 12버전과 동일한 디렉토리를 사용하기 때문에, 13 버전이라도 헷갈리는 경우가 있으니 조심하자.. 따라서 우선 12와 13 버전의 가장 큰 차이점은 _app.tsx/_document.tsx(_app.js/_document.js)의 유무라고 할 수 있다. page 폴더 안에 앞의 파일이 있다면, 지금 하는 방식으로 전역 스타일을 적용해 주면 된다.

간단하게 /styles/globals.css 에 전역으로 적용할 css를 넣어주면 된다. 넣어주기만 하면 될까? 아니다. 기본적으로 전역으로 적용하기 위해서는 _app.tsx파일에 아래와 같이 import를 해줘야 한다.

import "/styles/globals.css";

이때 주의할 점은 document.js에 넣으면 에러가 나기 때문에 아래와 같이 _app.js에 import를 해주면 간단히 해결이 된다.

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

export default function App({ Component, pageProps }: AppProps) {
  return (
      <Component {...pageProps} />
  );
}

그렇다면 왜 _document.js에 넣어주면 안 되는 것일까? 기본적으로 _app.js 와 _document.js는 둘 다 진입점이라 생각을 하면 된다. _app.js에서는 React 자체 핸들링을 하기 위한 설정을 넣어준다면, _document.js에서는 HTML 엘리먼트를 핸들링할 때 넣어주면 된다. 따라서 리덕스나 레이아웃 컴포넌트를 넣는 위치는 _app.js가 된다. _document.js는 서버에서만 렌더링 되기 때문에 브라우저에서 적용가능한 것들은 불가능하다. 당연히 이벤트 핸들러도 _document.js에서는 불가능하다고 할 수 있다.

Nextjs 13. 전역 스타일 적용하기

이제 최신버전에 대해 알아보자. 대부분 아래와 같은 방법으로 Nextjs로 프로젝트를 셋업 했을 것이다.

npx create-next-app@latest

그렇다면, 13버전에는 _app.js와 _document.js가 없다. 기존 12 버전에는 /page 폴더와 /page/api, /public과 같이 각각의 폴더의 특징이 명확했다. 하지만, 13 버전에서는 완전 변경된 방식으로 app 디렉터리 안에 layout.jsx에 아래와 같이 전역 css 스타일을 적용 가능하다. (13 폴더 설명은 생략.)

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

RootLayout이란, app 디렉터리의 상위에 존재하는 폴더이다. 그리고 모든 페이지는 RootLayout을 지나기 때문에, RootLayout을 통해 서버로부터 리턴되는 초기 HTML을 설정할 수 있다. 이러한 이유로 전역 스타일 설정을 이곳에서 손쉽게 설정을 하면 된다. 정리하면, 기존 12에서 사용되던, _app.js 와 _document.js가 이 RootLayout으로 변경된 것이다.

전역 css 내부 코드

css 설정 예시를 간단히 보고, 전역 스타일을 활용하는 방법을 알아보자. 아래는 global.css Sample이다. 물론 scss를 사용한다면, 변경해서 적용하면 된다.

:root {
  --font-family: sans-serif;

  --main-blue: rgb(85, 72, 255);
  --main-white: #ffffff;

  --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

* {
  scroll-behavior: smooth;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 14px;
}

body {
  font-family: var(--font-family);
  background-color: var(--background-gray);
}

a {
  text-decoration: none;
  color: inherit;
}

위의 코드를 간단히 설명해 보면, root 부분에는 CSS 변수를 설정한 부분이라고 할 수 있다. 그리고 설정한 변수는 body 부분처럼 var에 감싸서 사용을 해주면 된다. root 부분의 --main-blue로 색을 지정한 이유는 프로젝트마다 메인 색이 있다. 이러한 메인 색을 변수로 지정하여 관리하기 위함이다. 이러한 방식으로 프로젝트 시작 시 변수를 설정하고 각각의 프로젝트에서 사용하면 된다.

저작자표시 비영리 변경금지

'Web > nextjs' 카테고리의 다른 글

redux-toolkit 프로젝트 적용 실습 (0)	2023.09.19
[nextjs] next.config.js 내부의 Rewrite 적용 (0)	2022.11.27
[reactjs/nextjs] cannot update a component (`MyApp`) while rendering a different component (`AuthticatedComponent`). (0)	2022.10.06
[nextjs] mongodb 연결 (0)	2022.09.30
[nextjs] console.log가 두 번 찍히는 이유 (0)	2022.09.24

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

AI Platform / Web

티스토리 뷰