Next.js의 간단한 경로 전환

Next.js 페이지 전환에 대한 간단한 후크 기반 접근 방식을 공유하겠습니다. 이 기사는 CSS에 초점을 맞추지 않고 사용자 정의 반응 후크를 작성하는 방법에 대해 설명합니다.
CSS 마법을 수행하기 위해 https://mui.com/material-ui/transitions/ 을 사용할 것입니다.

첫 번째 단계는 _app.js 폴더에 pages라는 파일을 생성하여 Next.js에서 페이지 렌더러를 가로채는 방법을 식별하는 것입니다.

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

https://nextjs.org/docs/advanced-features/custom-app
Next.js uses the App component to initialize pages. You can override it and control the page initialization.

우리의 유일한 관심사는 _app.js가 각 페이지가 렌더링되기 전에 실행되어 레이아웃을 재정의하고 전환 효과를 활성화할 수 있다는 것입니다.

이 정보를 사용하여 계속해서 사용자 지정 후크를 작성할 수 있습니다.

import { useEffect, useState } from 'react';

export default function useSimpleRouteTransition({ delay, children }) {
  const [transitionEnd, setTransitionEnd] = useState(true);
  const [displayChildren, setDisplayChildren] = useState(children);

  useEffect(() => {
    setTransitionEnd(false);
    const t = setTimeout(() => {
      setDisplayChildren(children);
      setTransitionEnd(true);
    }, delay);

    return () => {
      clearTimeout(t);
    };
  }, [children]);

  return {
    displayChildren,
    transitionEnd,
  };
}

초기화하려면 두 개의 매개변수가 필요합니다.

delay 각 전환에 대한 시간(밀리초)입니다.

children는 _app.js에서 받은 반응 요소입니다.

코드를 분석해 봅시다.

const [transitionEnd, setTransitionEnd] = useState(true);
const [displayChildren, setDisplayChildren] = useState(children);

시작 값으로 true를 사용하여 내부 상태를 정의하고 children의 복사본을 만듭니다.
useEffect 코드로 다이빙.

useEffect(() => {
  setTransitionEnd(false);
  const t = setTimeout(() => {
    setDisplayChildren(children);
    setTransitionEnd(true);
  }, delay);

  return () => {
    clearTimeout(t);
  };
}, [children]);

children가 변경될 때마다 setTimeout가 대기열에 추가되어 세트delay 다음에 새 자식을 업데이트합니다. 이 작업을 나타내기 위해 내부transitionEnd를 false에서 true로 전환합니다.
마지막으로 구성 요소가 마운트 해제될 때마다 제한 시간이 지워집니다.
Layout 구성 요소에 모든 것을 합치면 다음과 같아야 합니다.

import Link from 'next/link';
import { Box, Container, Stack, Fade } from '@mui/material';
import useSimpleRouteTransition from '@/hooks/useSimpleRouteTransition';

export default function Layout({ children }) {
  const { transitionEnd, displayChildren } = useSimpleRouteTransition({
    delay: 1000,
    children,
  });

  return (
    <Container maxWidth="lg">
      <Box
        sx={{
          flexFlow: 'column nowrap',
        }}
      >
        <Box mt={10} mb={0}>
          <h1>Page transitions with Next.js</h1>
        </Box>
      </Box>
      <Stack direction={'row'} spacing={2}>
        <Link href="/">index</Link>
        <Link href="/blog">blog</Link>
        <Link href="/links">Links</Link>
      </Stack>
      <Box sx={{ bgcolor: 'green', p: 2 }}>
        <Fade in={transitionEnd} timeout={1000}>
          <div>{displayChildren}</div>
        </Fade>
      </Box>
      <Box sx={{ bgcolor: 'darkblue', p: 2 }}>Footer</Box>
    </Container>
  );
}

구현을 살펴보겠습니다.

const { transitionEnd, displayChildren } = useSimpleRouteTransition({
    delay: 1000,
    children,
  });

delay: 1000 및 children를 사용하여 사용자 지정 후크를 호출하고 부모 구성 요소에서 가져옵니다. 거기에서 displayChildren 및 transitionEnd 를 수신합니다.

<Fade in={transitionEnd} timeout={1000}>
  <div>{displayChildren}</div>
</Fade>

우리의 견해로는 displayChildren 대신 children가 항상 표시됩니다. 이 보기를 Fade 구성 요소로 래핑하고 제어된 페이드를 달성하기 위해 transitionEnd를 사용하여 설정합니다.

그리고 그게 다야! 그것이 당신에게 효과가 있는지 알려주세요.

GitHub에서 모든 소스 코드를 찾을 수 있습니다.
https://github.com/calinalexandru/next-js-router-transitions