Next.js

프레임워크

• 기존 index, app 파일의 역할은 내부적으로 수행된다.

• 라이브러리는 내가 코드를 사용한다. 프레임워크가 내가 작성한 코드를 사용한다.

pages

• 파일명은 중요하다. url의 이름

• pages 폴더의 컴포넌트명은 중요하지 않다.

• 컴포넌트를 export default 해야 한다.

• 404 페이지가 기본적으로 제공된다.

• 아래와 같이 폴더를 만들 수도 있다.

• React를 import할 필요가 없다. 확장자가 .tsx, .ts가 될 필요도 없다.

Static Pre Rendering

• CSR: “브라우저가 자바스크립트(+ 리액트)를 가져오고, UI를 전부 만든다”

• Next.js: 네트워크가 느리거나, 자바스크립트가 비활성화 되어 있어도 HTML을 볼 수 있다.

• hydration: pre-rendering이 끝난 뒤, 자바스크립트(+ 리액트)가 로드되면 넘겨받아 동작한다.
일반적인 React 앱이 된다.

• Next.js는 React를 백엔드에서 동작시켜서 초기 페이지를 만들고 html에 넣어준다.

Routing

• a 태그를 사용하지 마라. 새로고침 되기 때문이다.

import Link from "next/link"

export default function NavBar() {
  return <nav>
    <Link href="/"><a>Home</a></Link>
    <Link href="/about"><a>About</a></Link>
  </nav>
}

Styles JSX

• Next JS 고유의 방법

• 명시한 스타일은 컴포넌트 내부로 스코프가 제한된다.

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>{style}</style>
  </nav>
}

const style = `
  nav {
    background-color: tomato
  }

  .active {
    color: yellow
  }
`;

Custom App

import type { AppProps } from "next/app"
import NavBar from "../components/NavBar"

export default function App({ Component, pageProps }: AppProps) {
  return <div>
    <NavBar />
    <Component {...pageProps} />
    <style jsx global>{
      `
        h1 {
          color: red
        }
      `
    }</style>
  </div>
}

추가

1. _app

1. _document
_app 다음에 실행되며, 공통적으로 사용할 head나 body 태그 안에 들어갈 내용을 커스텀.
즉, 모든 문서에 공통적으로 적용할 HTML 마크업을 커스텀 하는 곳이다.

패턴

• Layout 컴포넌트

• Head 컴포넌트 (내장)

Redirects

// next.config.js
const API_KEY = process.env.API_KEY; // .gitignore에 포함시키기

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/contact',
        destination: '/form',
        permanent: false,
      },
      {
        source: '/old-blog/:path',
        destination: '/new-blog/:path',
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: '/api/movies',
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

Rewrites

타입스크립트

• getServerSideProps ⇒ GetServerSideProps

• getStaticProps ⇒ GetStaticProps

• getStaticPaths ⇒ GetStaticPaths

export type GetServerSideProps<
  P extends { [key: string]: any } = { [key: string]: any },
  Q extends ParsedUrlQuery = ParsedUrlQuery,
  D extends PreviewData = PreviewData
> = (
  context: GetServerSidePropsContext<Q, D>
) => Promise<GetServerSidePropsResult<P>>