[Next] styled-jsx

next에서 style 적용해보기

import Link from 'next/link'
import { useRouter } from 'next/router'
import styles from "./NavBar.module.css";

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

 

스타일 태그를 쓰고 jsx 붙이면 끝!

직관적이고 알아보기 쉽다

 

Next에는 특정컴포넌트를 이용하면 페이지가 렌더링 될 때 마다 사용할 수 있는 컴포넌트가 있다

이름하여 _app.js

 

<_app.js>
import NavBar from '../components/NavBar';

export default function App({Component, pageProps}){
    return(
    <div>
        <NavBar/>//전체에 NavBar가 적용됨
        <Component {...pageProps}/>
      //어떤페이지 든 적용 될 수 있도록 함
        <style jxs global>{`
        a{
            color:white;
        }
        `}</style>
      //style 또한 전체 페이지에 전역으로 적용 됨
    </div>
    )
}