[Next.js] Styles-JSX & Custom App

💻 Styled-jsx

Next.js에 내장되어있는 Styled-jsx는 따로 노드 모듈설치없이 바로 사용할 수 있다. 그렇기에 import를 하지않아도 사용가능하다. 또한 기본적으로 사용된 컴포넌트에만 영향을 주며, 전역으로 활용하기 위해서는 global이라는 속성을 사용한다.

🖤 적용하기

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

export default function NavBar() {
    const router = useRouter();
    return (
        // next에서 Link태그 자식으로 a태그 사용 X
        <nav>
            <Link href="/" className={router.pathname === "/" ? "active" : ""}>
                Home
            </Link>
            <Link href="/about" className={router.pathname === "/about" ? "active" : ""}>
                about
            </Link>
            <style jsx>{`
                nav {
                    background-color: skyblue;
                }
                Link {
                    text-decoration: none;
                }
                .active {
                    color: red;
                }
            `}</style>
        </nav>
    );
</script>

💻 Custom App

nextjs는 렌더링할 페이지 컴포넌트를 Component와 Component에서 사용하는 pageProps를 인자로 받는 _app.js 컴포넌트를 제일 먼저 렌더링 한다.
App컴포넌트를 사용하여 page를 초기화한다. 이를 통해 할수있는 기능은 아래와 같다.
1) 페이지 변경 간에 레이아웃 유지
2) 페이지 탐색 시 state유지
3) componentDidCatch를 사용한 Custom 에러 처리
4) 페이지 추가 데이터 삽입
5) GlobalCSS추가

기본 App을 재정의하려면 ./pages/_app.js 파일을 만든다

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

❗ with typeScript의 경우, _app.ts가 아닌 _app.tsx파일을 만들고 아래와 같이 작성해준다.

<script>
import type { AppProps } from 'next/app'

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

글로벌 css간 충돌을 피하기 위해서 파일명.module.css 파일 형태를 제외한 모든 나머지 css파일들은 _app.js에서만 import해서 사용해야한다.