[Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(not-found)
2024년 02월 11일 14시 51분 24초에 업로드 된 글입니다.
작성자: DandyNow
728x90
반응형
📌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;