Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- useState
- 깃허브오류
- appendChild
- 부트캠프 #CSS #개발일지 #TIL #박스모델
- 부트캠프 #개발일지 #TIL #Position #위치
- 결합선택자
- 부트캠프
- ㅜㄹㄹ
- 템플릿스트링
- querySelector
- React
- 부트캠프 #스파르타코딩클럽 #개발일지# #TIL #Javascript #confirm #location.href
- CSS
- 부트캠프 #개발일지 #TIL #그리드 #CSS
- 개발일지 #TIL #프론트엔드 #HTML
- js
- 개발일지
- useEffect
- 부트캠프 #코딩 #개발일지 #프론트엔드 #CSS #TIL
- textContent
- 부트캠프 #개발일지 #TIL #CSS속성 #float #clear
- 알고리즘
- Til
- 의사클래스
- 리액트
- 부트캠프 #개발일지 #TIL #FlexboxFroggy #displayflex #flexbox
- 부트캠프 #스파르타코딩클럽 #개발일지# #html
- 부트캠프 #CSS #개발일지 #TIL
- 특성선택자
- JS예제
Archives
- Today
- Total
나의 개발일지
[Next.Js] 404 페이지 / Not-Found Errors 처리 본문
Not-Found
<요청한 페이지가 존재하지 않을 때, 오류를 처리하는 방법>
Next.js는 기본적으로 페이지가 존재하지 않을 경우, 404 페이지가 출력된다.
하지만 에러페이지를 custom할 수 있다.
Next.js에서 명시한 규칙의 파일명 not-found.tsx 파일을 만들어 사용하면 된다.
아무 주소를 입력했을 때 내가 설정한 문구가 뜬다.
Global not-found와 Local not-found
Global not-found : 말그대로 전체적인 범위에 대해 적용되는 404페이지이다.
'app/not-found.tsx'로 위에서 만든 것이 Global not-found이다.
Local not-found : 특정 라우트 내에서만 적용되는 404페이지이다
앱 전체 범위 뿐만 아니라 '/pages/posts/[id].tsx'와 같은 동적 라우트에서 해당 id가 존재하지 않는 경우에 대해 별도의 404페이지를 정의할 수 있다. 사용자에게 더 자세하고 구체적인 에러메세지를 제공하는 경우에 사용하는 것이 좋다.
app/users/[id]/not-found.tsx
import React from "react";
const UserNotFound = () => {
return <div>사용자가 존재하지 않습니다.</div>;
};
export default UserNotFound;
app/users/[id]/page.tsx
import React from "react";
import { notFound } from "next/navigation";
interface Props {
params: { id: number };
}
const UserDetailPage = ({ params: { id } }: Props) => {
if (id > 10) notFound();
return <div>UserDetailPage {id}</div>;
};
export default UserDetailPage;
id가 10을 넘어가면 설정해놓은 오류 메세지가 뜬다.
'Next.Js' 카테고리의 다른 글
[Next.JS] Data Fetching (0) | 2024.03.23 |
---|---|
[Next.JS] Route groups | Metadata | Params (0) | 2024.03.20 |
[Next.Js] Layouts 사용하기 (0) | 2024.03.15 |
[Next.Js] Navigation / usePathname (0) | 2024.03.05 |
[Next.Js] Page router와 다른 점 / App Router를 사용하는 이유 / 설치 및 Routing (0) | 2024.02.28 |