NotFound페이지 구성하기(with NextJs)

Mincho·2023년 6월 15일

React nextjs notfound typescript

[NextJs]

목록 보기

7/12

🔴 nextJs에서 notfound페이지

NextJs에서는 기본적으로 Not Found페이지를 제공한다. Not Found는 보통 사용자가 존재하지 않는 url로 접근하면 보여주는 사용자 측면에 특화 되어야 하는 페이지이다.

하지만 이런 기본적인 화면만 보여주게 되면 사용자 경험적인 측면을 간과하게 된다. 웹에 대해 미숙한 사용자가 보게 되면 웹 페이지에 대한 신뢰도가 떨어지게 되고 결과적으로 이탈률도 상승하게 된다.

따라서 친절하고 올바른 경로로 유도하여 웹 페이지 이탈률을 낮추는 것이 좋다.

🟠 notFound페이지 생성하기

다행이도 NextJs에서는 간단히 notFound페이지를 만드는 방법이 있다. not-found.tsx(JS는 not-found.js)이름으로 app폴더에 만들어주면 된다.

// app/not-found.tsx
"use client";
import {
  Button,
  Heading,
  HStack,
  useColorMode,
  VStack,
} from "@chakra-ui/react";
import { useRouter } from "next/navigation";

export default function NotFound() {
  const color = useColorMode().colorMode;
  const router = useRouter();

  return (
    <HStack
      bg="white"
      justifyContent="space-evenly"
      minH="100vh"
      paddingTop={"10rem"}
      bgColor={
        color === "light" ? "white" : "var(--chakra-colors-chakra-body-bg);"
      }
    >
      <VStack
        h={"100vh"}
        alignItems={"flex-start"}
        position={"relative"}
        spacing="10"
      >
        <Button
          onClick={() => router.push("/")}
          right={0}
          pos={"relative"}
          size={"lg"}
          position="relative"
          variant={"solid"}
          bg={"gray.400"}
        >
          &larr; Go Home
        </Button>
        <VStack spacing={10}>
          <Heading size={"2xl"}>
            죄송합니다. 해당 페이지를 찾을 수 없습니다.
          </Heading>
          <Heading size={"lg"}>요즘 떠오르는 아이돌들을 살펴보세요.</Heading>
        </VStack>
        <VStack spacing={2}></VStack>
      </VStack>
    </HStack>
  );
}

메인 페이지로 돌아가는 버튼을 만들고 사용자에게 정중한 메시지를 보내며 아래에 백엔드에서 데이터를 받아 처리할 예정이다.

🟡 notFound페이지에서 라우팅 해주기

처음에 위의 코드와 같이 홈으로 가기 버튼에router.push 로 라우팅 해주었다. 그런데 push보다는 replace를 이용해 처리하는 것이 더 사용자 경험에 좋을 것이라 판단했다.

router.push vs router.replace

router.push()는 스택방식으로 접속한 url을 하나씩 쌓아서 처리 하는 방식이라고 보면 된다.

만약 홈페이지에서 -> 회원가입 페이지 -> 로그인 페이지로 이동한다 가정해보자 그렇게 되면 [홈페이지, 회원가입 페이지, 로그인 페이지] 순으로 history에 남게 된다. 여기서 router.push("홈페이지")를 호출하면 [홈페이지, 회원가입 페이지, 로그인 페이지, 홈페이지]가 된다.

router.replace()는 마지막에 접속한 url을 replace에 넣어준 url로 바꾸는 방식이다.