Next.js

React Framework

Static Pre Redering

next.js에 의해 초기상태로 HTML이 미리 렌더링됨

routing

Link component 존재
Link is only for 'href'
className, style ... a tag에 작성

<nav>
  <Link href="/">
    <a>Home</a>
  </Link>
  <Link href="/about">
    <a>About</a>
  </Link>
</nav>

or

const router = useRouter();
const onClick = (id: number) => {
  router.push(`/movies/${id}`);
};

or

const router = useRouter();
const onClick = (id: number, title: string) => {
  router.push(
    {
      pathname: `/movies/${id}`,
      query: {
        title,
      },
    },
    `/movies/${id}`
  );
};

Dynamic routes

공식문서

homepage/movies/:id = pages/movies/[id].js

Styled-jsx

공식문서

해당 컴포넌트 스코프 내로 적용범위가 한정됨

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

// global로 적용(하위컴포넌트까지 적용)
// but, 페이지가 다르면 적용안됨
<style jsx global>{`
  nav {
    background-color: tomato;
  }
  a {
    text-decoration: none;
  }
`}</style>

CSS Modules

random class name을 만들어줌

// 1
import styles from "./NavBar.module.css";

const NavBar = () => {
  const router = useRouter();
  return (
    <nav className={styles.nav}>
...

// 여러 클래스네임을 적용할 때
// 2
<Link href="/">
  <a
    className={`${styles.link} ${
      router.pathname === "/" ? styles.active : ""
    }`}
  >
    Home
  </a>
</Link>

// 3
<Link href="/">
  <a
    className={[
      styles.link,
      router.pathname === "/" ? styles.active : "",
    ].join(" ")}
  >
    Home
  </a>
</Link>

Custom App

공식문서

여기서 GlobalStyles를 추가해줄수 있음
custom app에서만 css import가 가능(다른 페이지나 컴포넌트에서는 module이어야함)

// Component => 렌더링하길 원하는 페이지
import type { AppProps } from 'next/app'

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  );
};

Layout

공식문서

_app 파일이 무거워지지 않도록 Layout을 활용

// components/Layout
import NavBar from "./NavBar";

type LayoutProps = {
  children: React.ReactNode;
};

export default function Layout({ children }: LayoutProps) {
  return (
    <>
      <NavBar />
      <div>{children}</div>
    </>
  );
}

// _app
const App = ({ Component, pageProps }: AppProps) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
};