로딩,에러,404페이지 만들기

Next.js에서 <Link>등으로 페이지 이동시 새로고침이아니라 꼭 필요한 부분만 바뀌도록 세팅되어있다.

loading.js

리액트에서 <Suspense fallback={<h4>loading../</h4>}>이거랑 똑같은 역할을 해준다.
Next.js에선 loading.js 파일에 적으면 자동으로 Suspense 기능을해준다.

page.js 옆에 loading.js라는 이름으로 파일을 만들면 page.js 로드전에 loading.js안의 내용을 미리 보여준다.

Ex) loading.js, 컴포넌트 만들고 그 안에 로딩중에 보여줄 UI를 넣어주면된다.
참고로 client component로도 사용가능하다.

// loading.js
export default function Loading() {
  return <h4>Loading...</h4>;
}

경로는 /app/loading.js 이렇게 파일을 넣어줘도된다.
page.js옆에 loading.js 파일이없으면 상위폴더로 이동하면서 loading.js를 찾는다. 그러면서 가장 가까운 loading.js파일을 찾아서 적용해준다.

error.js

loading.js와 마찬가지로 page.js옆에 error.js파일을 만들어주면된다.

Ex)

error.js;

('use client');

export default function Error({ error, reset }) {
  return (
    <div>
      <h4>Error 페이지 예시</h4>
      <button
        onClick={() => {
          reset();
        }}
      >
        다시시도
      </button>
    </div>
  );
}

몇가지 참고사항이 있다.

• client component로만 작성가능하다.
• error라는 props출력해보면 에러내용을 알려준다.
• reset라는 props를 () 붙여서 실행하면 해당 페이지를 다시 로드해준다.
  

경로는 /app/error.js 이렇게 파일을 넣어줘도된다.
page.js옆에 error.js 파일이없으면 상위폴더로 이동하면서 error.js를 찾는다. 그러면서 가장 가까운 error.js파일을 찾아서 적용해준다.

not-found.js

없는 URL로 접속하는 유저에게 보여주는 페이지다.
Next.js에선 자동으로 404 page not found페이지를 보여주기때문에 직접 만들 필요는 없다

Ex)

not - found.js;

export default function NotFound() {
  return <h4>404 에러페이지</h4>;
}

• not-found.js 파일을 page.js 옆에 만들어두고 404페이지를 꾸며준다.

import { notFound } from 'next/navigation';

export default async function Detail(props) {
  const db = (await connectDB).db('forum');
  let result = await db
    .collection('post')
    .findOne({ _id: new ObjectId(props.params.id) });

  if (result == null) {
    return notFound();
  } else {
    return 상세페이지;
  }
}

• 특정 상황에서 404페이지를 보여주고 싶은 경우 notFound()라는 함수를 실행시켜준다.
• page.js대신 not-found.js를 보여주게된다.
• 계속 상위폴더로 찾아가면서 가장 가까운 not-found.js를 보여주려고 하기때문에 app폴더에 not-found.js 하나만 만들어놔도 쉽게 404페이지를 보여줄 수 있다.