Next.Js 12

태권·2022년 11월 7일

개발일지

목록 보기

16/19

Next.JS 12

최근에 nextJs 버젼이 13으로 업그레이드 되었는데
일단 지금은 12버젼을 쓰고 있고 13에서도 12버젼을 사용할 수 있기때문에 12버젼을 먼저 공부하고
다음에 13버젼이 12랑 어떤 점에서 다른지 적어보겠다.

NextJS CSS 적용

function Home() {
  const variable = "red";
  return (
    <div className="title">
      <h1>Home</h1>
      <style jsx>
        {`
          h1 {
            color: ${variable};
          }
        `}
      </style>
    </div>
  );
}
style 태그를 사용하용해서 jsx문법을 쓰고 global을 쓴다면 css를 글로벌하게 적용할 수 있다 하지만 다른 페이지 로 간다면 css가 없기 때문에 _app.tsx안에 적용해야한다

_app.tsx

렌더링 하는 값은 모든 페이지에 영향을 주기 때문에 전체적인 레이아웃을 잡거나 헤더나 풋터를 적용할때 사용한다.
import '../styles/globals.css'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default MyApp

HEAD

<Head></Head>
일반적인 html 파일의 head와 같이 메타 태그를 넣을 수 있고 Head부분을 바꿔 줄 수있는 태그이다.

페이지 이동

import Link from "next/link";
const Index = () => (
  <div>
    <Link href="/blog">
      <a>Blog</a>
    </Link>
    // 동적 link시 [] 사용
    <Link href="/blog/[address]">
      <a>Blog</a>
    </Link>
  </div>
);