404 오류 페이지는 웹사이트를 방문하는 사용자에게 잘못된 경로로 접근했을 때 보여지는 페이지입니다. Next.js에서는 이러한 404 오류 페이지를 손쉽게 커스터마이즈 할 수 있어 사용자에게 보다 친숙한 환경을 제공할 수 있습니다.
Index
Next.js에서 커스텀 404 페이지 만들기
Next.js에서 커스텀 404 페이지를 생성하려면 프로젝트의 pages 디렉토리에 404.js 또는 404.tsx 파일을 추가하면 됩니다.
예제 코드
아래 예제는 간단한 커스텀 404 페이지를 만드는 방법을 보여줍니다:
// pages/404.js
import Header from '../components/Header';
import Footer from '../components/Footer';
export default function Custom404() {
return (
<>
<Header />
<h1>Custom 404 Error Page</h1>
<p>The page you are looking for does not exist.</p>
<Footer />
</>
);
}
이 파일은 사용자가 존재하지 않는 페이지로 이동할 때 자동으로 Next.js에 의해 제공됩니다.
404 및 500 오류 페이지 커스터마이징
404 오류 페이지
pages디렉토리에404.js파일을 생성하여 404 오류를 처리합니다. 이 페이지는 일반적으로 정적이며 필요에 따라 맞춤 설정이 가능합니다.
500 오류 페이지
- 서버사이드 오류(500 오류)를 처리하려면
pages디렉토리에_error.js파일을 생성해야 합니다. 이 파일은 서버사이드 오류를 처리하며 관련 오류 메시지를 표시하도록 커스터마이징할 수 있습니다.
// pages/_error.js
function Error({ statusCode }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: 'An error occurred on client'}
</p>
);
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
};
export default Error;
이 접근 방식은 서버사이드 오류와 클라이언트사이드 오류를 다르게 처리하도록 보장합니다.
404 오류 관리의 모범 사례
클라이언트 사이드 솔루션
- URL 검증: URL이 정확하고 오타가 없는지 확인합니다.
- 브라우저 캐시: 지급된 데이터를 방해하지 않도록 브라우저 캐시 및 쿠키를 삭제합니다.
- 사용자 친화적인 404 페이지: 도움이 되는 메세지와 홈페이지나 다른 관련 페이지로 연결되는 링크가 포함된 친화적인 404 페이지를 제공합니다.
서버 사이드 솔루션
- 서버 로그 분석: 서버 로그를 분석하여 404 오류의 출처를 식별하고 이를 통해 잘못된 링크나 URL 설정을 수정할 수 있습니다.
- 리다이렉션 설정: 이동되거나 이름이 변경된 페이지에 대한 리다이렉션을 설정하여 404 오류를 방지합니다.
- CDN 및 캐싱 설정: CDN 및 캐싱 설정이 잘못된 리소스를 제공하지 않도록 확인합니다.
SEO 고려사항
- Google Search Console 사용: Google Search Console을 사용하여 404 오류를 감지하고 수리하여 SEO에 부정적인 영향을 미치는 것을 방지합니다.
- XML 사이트맵: XML 사이트맵을 업데이트하여 유효한 URL만 포함되도록 합니다.
- Broken Link Checker 사용: 사이트의 부러진 링크를 감지하고 수정하기 위해 도구를 사용합니다.
이러한 단계와 모범 사례를 따르면 Next.js에서 404 오류 페이지를 효과적으로 커스터마이징하고 관리할 수 있으며 사용자 경험과 SEO를 향상시킬 수 있습니다.
