[NEXT] Next.js에 스타일 적용하기

이 포스팅에서는 해당 컴포넌트에서만 스타일를 적용하는 방법과

전역으로 스타일(Global Style)을 적용하는 방법에 대해 다룰 것이다.

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

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link  href="/" legacyBehavior >
        <a >Home</a>
      </Link>
      <Link href="/about" legacyBehavior>
          <a  >About</a>
      </Link>
    </nav>
  );
}

NavBar이라는 컴포넌트를 만들어서 적용해보자

 

한 컴포넌트에만!

1️⃣ style속성 

태그 안에 직접 style을 작성해주는 방법이다

  <Link href="/" legacyBehavior >
    <a style={{color:"green"}}>Home</a>
  </Link>

참고로 Next 13버전이 올라오면서 a태그에 사용하던 속성들을 Link에도 적용할 수 있게 되었다.

하지만 legacyBehavior을 넣어주어서 a태그에 직접 스타일을 입히는 것이 더 편해서 

위와 같이 작성해주었다.

 

 

2️⃣ css module사용

moduel파일을 만들어서 import하는 방법이다

NavBar.module.css라는 파일을 만들고 다음과 같이 작성한다.

//NavBar.module.css

.link {
  text-decoration: none;
}

.active {
  color: tomato;
}

 

 

이후 경로에 따른 css적용을 위해 다음과 같이 적어준다.

//NavBar.js
import styles from "./NavBar.module.css";
...

  <Link href="/" legacyBehavior>
    <a
      className={`${styles.link} ${
        router.pathname === "/" ? styles.active : ""
      }`}
    >
      Home
    </a>
  </Link>
  <Link href="/about" legacyBehavior>
    <a
      className={[
        styles.link,
        router.pathname === "/about" ? styles.active : "",
      ].join(" ")}
    >
      About
    </a>
  </Link>

import를 해주고 그 후에 style.(태그명 혹은 클래스명)와 같은 형태로 써준다

 

페이지나 컴포넌트에 css를 import하고 싶다면 무조건 module형태여야 한다

3️⃣ styled jsx

<style>태그를 통한 방법이다

태그 안에 jsx 속성만 넣어주면 된다.

//NavBar.js
...
  <style jsx>{`
    nav {
      background-color: tomato;
    }
    a {
      text-decoration: none;
    }
    .active {
      color: yellow;
    }
  `}</style>

가장 직관적인 방법이기도 하다

 

Global Style

전역으로 스타일을 넣어주고 싶을 땐 어떻게 해야할까?

 

1️⃣ styled jsx에 global 넣어주기

<style jsx global>
...

이거만 넣어주면 되긴 한다

하지만!!

다른 페이지가 렌더링 될 때는 적용이 안 되기도 한다 그래서 이 방법은 추천x

 

2️⃣ Custom App

Next.js는 App 컴포넌트를 사용하여 page를 초기화한다.

page에 _app.js(이름 중요!! 무조건 이거여야함)라는 파일을 만들어주어서 사용하면 된다.

_app.js는 모든 페이지에 공통으로 사용되는 컴포넌트로 모든 페이지에 레이아웃 등을 설정할 때 사용한다.

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

 

타입스크립트로 작성했을 경우 다음과 같다.

import type { AppProps } from 'next/app'

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

 

 

...pageProps는 모든 페이지의 구성요소를 보내는 역할을 한다.

 

_app.js가 가장 먼저 렌더링 되므로 다음과 같이 적으면 NavBar.js를 어느 페이지에서든 위에 둘 수 있다

또한 여기서 styled jsx global을 사용해주면 모든 페이지에 적용된다.

미리 정의된 global.css파일을 import해서 사용할 수도 있다.

import NavBar from "../components/NavBar";
import "../styles/globals.css"

export default function App({Component, pageProps}) {
    return (
        <>
        <NavBar/>
        <Component {...pageProps}/>
        <span>hi</span>
        <style jsx global>{`
            a {
                color:grey;
            }
        `}</style>
        </>
    )
}

 

 

_app.js에선 그냥 css파일을 import할 수 있지만

다른 파일에선 import 할 수 없고 무조건 module형태여야한다.