이 튜토리얼은 여러분이 next.js에 이미 익숙하고 페이지에 전환을 추가할 사항에 대해 알고 있으며 typescript를 사용할 희망이 있다고 가정합니다.

1 단계

필수 종속성 설치

$ npm install react-transition-group

Typescript를 사용하는 경우 해당 유형을 설치하십시오.

$ npm install -D @types/react-transition-group

2 단계

Transition.tsx에서 component folder 구성 요소를 만듭니다.

import {
  TransitionGroup,
  Transition as ReactTransition,
} from "react-transition-group"

import { ReactChild } from "react"

type TransitionKind<RC> = {
  children: RC
  location: string
}

const TIMEOUT: number = 200

const getTransitionStyles = {
  entering: {
    position: `absolute`,
    opacity: 0,
    transform: `translateX(50px)`,
  },
  entered: {
    transition: `opacity ${TIMEOUT}ms ease-in-out, transform ${TIMEOUT}ms ease-in-out`,
    opacity: 1,
    transform: `translateX(0px)`,
    animation: "blink .3s linear 2",
  },
  exiting: {
    transition: `opacity ${TIMEOUT}ms ease-in-out, transform ${TIMEOUT}ms ease-in-out`,
    opacity: 0,
    transform: `translateX(-50px)`,
  },
}

const Transition: React.FC<TransitionKind<ReactChild>> = ({
  children,
  location,
}) => {
  return (
    <TransitionGroup style={{ position: "relative" }}>
      <ReactTransition
        key={location}
        timeout={{
          enter: TIMEOUT,
          exit: TIMEOUT,
        }}
      >
        {(status) => (
          <div
            style={{
              ...getTransitionStyles[status],
            }}
          >
            {children}
          </div>
        )}
      </ReactTransition>
    </TransitionGroup>
  )
}
export default Transition

3단계

다음으로 이 Transition.tsx 구성 요소를 layouts/MainLayout 또는 _app.tsx로 가져오십시오.
children에서 <Component {...pageProps} />를 가져오고 경로 이름을 location props에 전달했습니다.

// import this `Transition.tsx` component to your `layouts/MainLayout` or `_app.tsx`
import React, { Fragment } from "react"
import Transition from "../components/Transition"
import { useRouter } from "next/router"

const MainLaylout: React.FC = () => {
  const router = useRouter()

  return (
    // you may import your header and footer here too
    <Fragment>
      <Transition location={router.pathname}>
        <div className="min-h-screen">{children}</div>
      </Transition>
    </Fragment>
  )
}
// React.memo may not be important
export default React.memo(MainLaylout)

4단계

이제 모든 준비가 완료되었습니다. 이제 useRouter에서 next//router를 사용할 시간입니다.
레이아웃을 사용하려면 MainLayout
예를 들어

import React, { Fragment } from "react"
// path to your main layout
import MainLayout from "layouts/MainLayout"

const IndexPage: React.FC = (props) => {
  return (
    <MainLayout>
      <div> replace with your content here..</div>
    </MainLayout>
  )
}
export default React.memo(IndexPage)

각 페이지를 기본 레이아웃으로 래핑합니다. 축하합니다. 방금 nextjs 앱에 페이지 전환을 추가했습니다.