[Next.js] error, 404 페이지 만들기

- 컴포넌트 파일의 위치

src
└ pages
	404.jsx
    _error.jsx

- 각 컴포넌트들의 위치는 위와같이 src 아래 pages 위치에 만들어준다.

- Next.js 에서 Error 페이지 만들기

// _error.jsx

const Error = () => {
	return(
    	<div>
        	<p>에러페이지 접속 시 메시지 입력</p>
        </div>
    )
}

export default Error;

- 위와같이 _error.jsx 컴포넌트를 만들어 준 후 코드를 작성해주면 Error 시 자동으로 Error페이지로 이동된다.

 

- Next.js 에서 404 페이지 만들기

// 404.jsx

const NotFound = () => {
	return(
    	<div>
        	<p>NotFound 페이지 접속 시 보여질 메시지 입력</p>
        </div>
    )
}

export default NotFound;

- NotFOund 페이지는 위와같이 404.jsx 컴포넌트를 만들어 준 후 코드를 작성해주면 잘못된 페이지 접속 시 자동으로 NotFound 페이지로 이동된다.