loading.js
(loading.js)
export default function Loading() {
return <h4>로딩페이지</h4>
}
리액트의 <Suspense> 컴포넌트랑 같은 기능으로,
=> Next.js에서는 loading.js로 작명을하게 되면, 페이지로딩 중에 해당 페이지를 출력해 준다.
error.js
(error.js)
'use client'
export default function Error({error, reset}){
return (
<div>
<h4>에러페이지</h4>
<button onClick={()=>{ reset() }}>다시시도</button>
</div>
)
}
서버 에러나, DB에러 등등의 에러발생 시,
error.js로 작명을 하게 되면 해당 페이지를 출력해 준다.
=> 단, client component로 만들어야 함.
=> props 기능 중 error, reset 파라미터가 존재함.
error = 에러내용 출력
reset() = 해당페이지를 다시 로드하는 함수
layout.js안에서 오류발생 시
=> global-error.js에 작성할 것.
not-found.js
import { notFound } from "next/navigation"
export default async function Test(props){
const db = (await connectDB).db('Test')
let result = await db.collection('test').findOne({ _id: new ObjectId(props.params.id) })
if (result == null) {
return notFound()
} else {
return (~~~)
}
}
없는 URL로 접속하는 경우,
=> 기본적으로 404페이지를 출력하지만 커스텀을 할 경우 사용.
1. not-found.js로 작명
2. notFound 라이브러리를 import
3. 특정 상황에 함수 실행.
(not-found.js)
export default function NotFound(){
return <h4> 404페이지</h4>
}
=> not-found.js 실행.
이쁘게 커스텀페이지로 만든 뒤에, 상위 폴더에 배치한다면, 특정상황의 경우를 대비하여 쉽게 랜더링 할 수 있어서
그 점을 되게 높이 사는 기능인 것 같다. 단순히 파일명 짓는 거뿐인데 특정기능이 생기는 게 좀 놀라울 따름이다,, 신기방귀!!
'Next.js' 카테고리의 다른 글
Presigned URL을 통한 이미지 업로드 (0) | 2023.07.10 |
---|---|
.env 파일 <보안작업> (0) | 2023.07.08 |
회원가입/로그인 기능 + JWT (0) | 2023.07.08 |
Next-Auth + Session 방식 (0) | 2023.07.08 |
Next-Auth를 통한 소셜로그인 (0) | 2023.07.08 |