[12주차] Next.js : Styled JSX, Custom App

Styles JSX

Next.js에서 가장 기본적인 방법으로 스타일을 할 수 있는 방법.

 

 

먼저 <style></style> 이라는 html 태그를 jsx 최상위 제외한 어느 곳이던지 넣어준다.

style의 속성으로 jsx와 global을 넣어준다. 내용으로는 중괄호가 감싼 백틱을 넣어준다.

// NavBar.jsx

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

export default function NavBar() {
  const router = useRouter();
  console.log(router);
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <style jsx global>{``}</style>
    </nav>
  );
}

 

 

백틱안에는 원래 css를 추가하는 것과 같이 추가해준다.

**Link 태그는 anchor tag 이므로, css로 꾸며줄때는 a 로 지정하여 꾸며준다.

// NavBar.jsx

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

export default function NavBar() {
  const router = useRouter();
  console.log(router);
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <style jsx global>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
      `}</style>
    </nav>
  );
}

 

 

클래스네임을 직접 부여하고 꾸며줄수도 있다.

import NavBar from "@/components/NavBar";
import Link from "next/link";

export default function Home() {
  return (
    <div>
      <NavBar />
      <h1>I am using routing!</h1>
      <Link href={"/"} className="atag">
        test
      </Link>
      <style jsx global>{`
        .atag {
          color: yellow;
        }
      `}</style>
    </div>
  );
}

 

 

---

 

응용1

현재 <style jsx>는 해당 컴포넌트 내로 스코프를 제한하면서 스타일링하는 방법은 <Link> 태그 안에 <a>태그로 감싸주고, Link태그 속성으로 legacyBehavior를 넣어주면 된다.

// about.jsx

import Link from "next/link";

export default function about() {
  return (
    <div>
      <h1>about</h1>
      <Link href={"/about"} legacyBehavior>
        <a>about anchor</a>
      </Link>
      <style jsx>
        {`
          a {
            background-color: #fffb00;
          }
          h1 {
            background-color: #9eff71;
          }
        `}
      </style>
    </div>
  );
}

 

 

응용2

global을 넣어주면 전역적으로 일하기때문에 부모컴포넌트이던 자식컴포넌트이던 둘다 global로 속성이 들어갔다는 전제 하에, 어떠한 클래스네임을 만들고 서로 공유해서 쓸 수 있다.

// index.jsx

import NavBar from "@/components/NavBar";
import Link from "next/link";

export default function Home() {
  return (
    <div>
      <NavBar />
      <h1>I am using routing!</h1>
      <Link href={"/"} className="test">
        test
      </Link>
      <style jsx global>{`
        .test {
          color: #ff0099;
        }
      `}</style>
    </div>
  );
}

// NavBar.jsx

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

export default function NavBar() {
  const router = useRouter();
  console.log(router);
  return (
    <nav>
      <Link href="/" className={router.pathname === "/" ? "active" : ""}>
        Home
      </Link>
      <Link
        href="/about"
        className={router.pathname === "/about" ? "active" : ""}
      >
        About
      </Link>
      <style jsx global>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
          color: black;
        }
        .active {
          color: #ffffff;
        }
      `}</style>
    </nav>
  );
}

---

 

Custom App

전역적으로 스타일을 적용하고 싶을 때, 또는 전역적으로 컴포넌트를 공유하고 싶을 때( 마치 layout처럼 )는 custom app component를 만들어야 한다. pages라는 폴더에 _app.js 라는 이름으로 파일을 만든다.

// _app.js 기본 포맷

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

import NavBar from "@/components/NavBar";
// custom app에서는 globals css를 import 할 수 있다.
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return (
    <div>
      <NavBar />
      <Component {...pageProps} />
      <span>test입니다.</span>
      <style jsx global>{`
        .test {
          color: #ff0099;
        }
      `}</style>
    </div>
  );
}