ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Next.js 14] Custom 404 페이지 만들기
    웹 개발/Nextjs 14 2024. 3. 24. 17:19

     

    404 페이지를 만들어야 하는 이유 3가지

    웹사이트를 개발할 때, 사용자가 올바르지 않은 경로로 접근했을 때도 처리해주는 것도 중요하다. 

     

    일반적으로 사용자가 이상한 경로로 접근했을 때 띄워주는 것이 404 페이지인데, 이 페이지를 직접 작성해주는 것이 좋다.

    그 이유에는 크게 3가지가 있다.

    1. 보안상의 이유
      404 페이지를 따로 만들지 않으면, 소스코드의 일부가 사용자에게 공개될 수 있다. 404 에러가 뜨면 해당 에러가 어디서 발생했는지 코드의 위치를 알려주는 경우가 있다. 대부분의 사용자는 대수롭지 않게 생각하겠지만 일부 사람들에 의해 악의적으로 사용될 수 있으므로, 그 가능성을 미연에 방지할 필요가 있다.
    2. 사용성 향상
      웹사이트와 같은 디자인 시스템을 적용한 커스텀 404 페이지를 작성하면, 디자인과 브랜딩 측면에서 사용자 경험이 방해받지 않아 일관성을 유지할 수 있다. 또한 사용자가 문제를 마주했을 때 사용자가 웹 사이트를 떠나지 않도록 홈 버튼 등의 장치로 유도할 수 있다.
    3. 문제 분석에 용이
      404 페이지를 작성할 때 추적 코드를 포함할 수 있는데, 이를 사용하면 사용자가 어디서 많이 문제를 겪는지 확인하고 개선할 수 있다. 또한 잘못된 링크나 누락된 페이지 등을 파악할 수 있으며, 사용자 피드백 폼 등을 추가하여 직접 문제에 대한 피드백을 받을 수도 있다.

     

    커스텀 404 페이지 생성 방법

    nextJS에서는 잘못된 링크로 접속하면 아래 사진처럼 기본 404 페이지가 뜨는 것을 확인할 수 있다.

     

     

    여기서 더 나아가 커스텀 404 페이지를 만드는 방법은 간단한데,

    app 폴더 바로 하위에 not-found.tsx 파일을 만들어 주면 끝이다.

    // not-found.tsx
    export default function NotFound() {
      return (
        <>
          <h2>Page not found</h2>
        </>
      )
    }

     

    이제 확인을 해보면, 웹 내의 모든 잘못된 접근에 대해 해당 페이지를 띄우는 것을 확인할 수 있다.

     

     

    경로별로 다른 404 페이지 띄우기

    잘못된 접근 외에도 뭐 삭제된 포스팅이라던가 유효하지 않은 링크라던가 등등의 에러 페이지를 추가하고 싶을 때가 있다.

    그럴 땐, 원하는 경로 아래에 not-found.tsx 파일을 만들어주면 된다.

    그 후, 해당 에러 페이지를 띄워야 할 때 next/navigationnotFound()를 실행해주면 끝이다.

    어떻게 사용할지 감이 안 잡히는 분들을 위해 내 코드를 발췌해서 가져왔다.

    // src/app/update/[...slug]/page.tsx
    import { headers } from "next/headers";
    import { notion } from "@/utils/notion/notion";
    import {getAllPosts} from "@/utils/notion/getAllPosts";
    import React from 'react';
    import ArticleDetails from '@/components/article/ArticleDetails';
    import {notFound} from 'next/navigation';
    
    export default async function  Home() {
      const posts = await getAllPosts();
      const slug = headers().get("x-next-article-slug") as string;
      const post = posts.find((t) => t.slug === slug);
    
      if (post) {
        const data = await notion.getPage(post.id);
        return (
          <ArticleDetails post={post} data={data} />
        );
      }
      else {
        notFound();
      }
    }
    // app/update/[...slug]/not-found.tsx
    export default function NotFound() {
      return (
        <>
          <h2>Cannot find post</h2>
        </>
      )
    }

     

    아래는 잘못된 주소로 접근했을 때 동작하는 영상이다. 이제 여기에 디자인만 입히면 된다.

     

     

     

    끗~