Next.js 시작하기 - (2) CSS-in-JS, Custom App

Series

Next.js 시작하기 - (1) Project setting, Routing

Next.js 시작하기 - (2) CSS-in-JS, Custom App

Next.js 시작하기 - (3) Pre-rendering, Data Fetching

 

---

 

Next.js에서 css를 적용하는 법과 앱을 커스텀하는 방법에 대해 알아보자.

 1. CSS-in-JS(Styled JSX) 

Next.js에서는 기본적으로 CSS-in-JS를 지원한다. 따로 설정을 할 필요없이 style 태그에 jsx 옵션을 주고, {``} 안에 스타일을 작성해주면 된다.

 

이 때 이 스타일들은 해당 컴포넌트 내부로 범위가 한정된다.

그렇기 때문에 global style을 적용하고 싶다면 <style jsx global> 처럼 global 옵션을 추가해주면 된다. 이 경우, 해당 페이지에서만 global로 동작한다. 때문에 정말 전역적으로 사용하고 싶다면(reset.css 처럼) 아래에서 소개하는 app을 customize하는 과정에서 적용해주면 된다.

import Link from "next/link";

const GNB = () => {
  return (
    <nav>
      <Link href="/">
        <a>HOME</a>
      </Link>
      <Link href="/about">
        <a>ABOUT</a>
      </Link>
      <style jsx>{`
        a {
          text-decoration: none;
          color: black;
        }
      `}</style>
    </nav>
  );
};

export default GNB;

GNB 스타일링하기

react에서는 NavLink의 isActive 속성을 이용해 선택된 메뉴에 스타일링을 할 수 있었다.

하지만 next에는 따로 그런 속성이 없기 때문에 useRouter를 이용해서 현재 경로인 pathname을 체크해주어야 한다.

import Link from "next/link";
import { useRouter } from "next/router";

const GNB = () => {
  const router = useRouter();

  return (
    <nav>
      <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>HOME</a>
      </Link>
      <Link href="/about">
        <a className={router.pathname === "/about" ? "active" : ""}>ABOUT</a>
      </Link>
      <style jsx>{`
        a {
          text-decoration: none;
          color: black;
        }
        .active {
          font-weight: 600;
        }
      `}</style>
    </nav>
  );
};

export default GNB;

---

 2. Custom App 

GNB나 Footer 등 여러 페이지에서 쓰이는 컴포넌트들은 매번 불러오기 번거롭다. 이런 경우를 위해 앱을 customize해줄 수 있다.

이는 pages 폴더 안에 _app이란 이름으로 파일을 생성하고, 공통 레이아웃을 작성해주면 된다. 이렇게 해주면 next는 다른 페이지들을 렌더링하기 전에 _app을 먼저 본 후 그 내용을 기반으로 다른 페이지를 렌더링한다.

pages/_app.tsx

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

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <GNB />
      <Component {...pageProps} />
    </>
  );
};

export default App;

Next.js에서 css module(파일명.module.css)을 제외한 나머지 모든 css파일들은 _app에서만 import해와서 사용해야 한다. (이는 css간의 충돌을 피하기 위해서이다.)

 

다음 글

Next.js 시작하기 - (3) Pre-rendering, Data Fetching

---

References

Styling Next.js with Styled JSX

Global CSS Must Be in Your Custom \<App>

NextJS 시작하기