Keyword

Next.js

styled jsx

next.js 고유의 style을 주는 방법
component return문 안에서 다음과 같이 작성
-> style 태그에 props로 jsx추가

 <style jsx>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
      `}</style>

styled jsx로 스타일을 주면
자동으로 요상한 클래스명이 생긴다
이 것들은 모듈별로 구분되어 생성됨 - 덕분에 각각의 파일 내부의 영역을 개별적으로 설정할 수 있다
className이 중복되더라도 자동으로 생성된 클래스명으로 각각의 파일을 구분
-> 파일들이 개별적인 스코프를 갖는다

styled jsx를 적용한 NavBar

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

export default function NavBar() {
  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>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
        .active {
          color: yellow;
        }
      `}</style>
    </nav>
  );
}

Global Style

styled jsx 문법에 global props 추가하면 전역 style을 줄 수 있다

 <style jsx global>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
      `}</style>

global을 줄 때는 파일의 위치나 구조를 생각해야함
-> 해당 파일 내부에 속한 component들만 global 설정이 된다

App Component (_app.js)

Next.js가 모든 페이지를 렌더링할 수 있게 하는 기본 페이지로
디폴트로 보이지는 않지만 커스텀하려면 _app.js 파일을 생성해야 한다
이름은 반드시 _app.js
렌더링시 _app.js를 가장 먼저 확인한다

app.js custom을 위한 생성

// _app.tsx
import type { AppProps /*, AppContext */ } from "next/app";

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

"/about" 으로 이동한다면 _app.tsx의 Component에 About이 들어가서 렌더링 되는

global style을 주려면 _app.tsx에 주면 된다

typescript, next.js _app.tsx type 블로그

app.tsx type 공식문서

아래에서 다른 내용을 추가해서 만들어도 된다

import type { AppProps /*, AppContext */ } from "next/app";

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

layout을 쉽게 만들 수 있을 것 같다

import type { AppProps /*, AppContext */ } from "next/app";
import NavBar from "../components/NavBar";

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

import type { AppProps /*, AppContext */ } from "next/app";
import NavBar from "../components/NavBar";

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

css file import

기본적인 next.js는 module이 아닌 css파일을 import할 수 없다
custom App인 _app.js에서는 가능

import type { AppProps /*, AppContext */ } from "next/app";
import NavBar from "../components/NavBar";
import "../styles/globals.css";

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