loading.js, error.js, not-found.js

---

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 실행.

---

이쁘게 커스텀페이지로 만든 뒤에, 상위 폴더에 배치한다면, 특정상황의 경우를 대비하여 쉽게 랜더링 할 수 있어서

그 점을 되게 높이 사는 기능인 것 같다. 단순히 파일명 짓는 거뿐인데 특정기능이 생기는 게 좀 놀라울 따름이다,, 신기방귀!!