[Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(not-found)

📌 not-found.tsx

1. 존재하지 않는 페이지 처리

// src/app/not-found.tsx

/* 존재하지 않는 페이지에 접근했을 때 레더링
텍스트 적용한 경우
*/

import React from "react";

const NotFound = () => {
  return <div>요청하지 않는 페이지는 존재하지 않습니다.</div>;
};

export default NotFound;

 

2. Dynamic Routes와 조합

// src/app/users/[id]/page.tsx

import { notFound } from "next/navigation"; // 추가
import React from "react";

interface Props {
  params: { id: number };
}

const UserDetailPage = ({ params: { id } }: Props) => {
  if (id > 10) notFound(); // 추가
  return <div>UserDetailPage {id}</div>;
};

export default UserDetailPage;

// src/app/users/[id]/not-found.tsx

import React from "react";

const NotFound = () => {
  return <div>10보다 큰 사용자는 존재하지 않습니다.</div>;
};

export default NotFound;

 

[그림 1] 조건에 따라 not-found.tsx가 렌더링 됨