[Next.js] Error/Loading/Not-found Page

• Error Page
  • app/error.tsx 생성
  • error page는 client에서만 랜더링 된다.
  • 예시

  • 'use client';
    
    import { useEffect } from 'react';
    
    export default function Error({ error, reset,}: {
      error: Error & { digest?: string };
      reset: () => void;
    }) {
      useEffect(() => {
      }, [error]);
    
      return (
        <div>
          <h2>Something went wrong!</h2>
          <pre style={{ color: 'red' }}>{error.stack || error.message}</pre>
          <button onClick={() => reset()}>
            Try again
          </button>
        </div>
      );
    }

• Loading Page
  • app/todos/loading.tsx 생성하면 자식 페이지(todos/[todoId]/page.tsx)도 함께 적용된다.
  • 예시

  • export default function Loading() {
      return <h1>Loading Todos...</h1>;
    }

• Not Found(404) Page
  • app/not-found.tsx 생성
  • not-found 페이지를 만들지 않으면 next.js default 페이지 자동 생성
  • 예시
    • app/not-found.tsx

    export default function NotFoundPage() {
      return <h1>404: Not Found Page</h1>;
    }
    

    • app/todos/[todoId]/page.tsx

    import { notFound } from 'next/navigation';
    
    export default async function TodoPage({ params: { todoId } }: Params) {
      const todo: Todo = await getTodo(todoId); // {}
      if (!todo.id) return notFound();
    }