Next.js #4 에러 페이지, 환경에 따른 분기처리

404페이지 만들기

pages/404파일을 만든다.
이 파일은 빌드 할 때 정적으로 생성될 것이다.

서버에러 500 페이지 만들기

500에러는 dev서버에서 어떤 에러가 발생했는지 보여주는 페이지가 나오기 때문에 production모드에서 봐야한다.
production모드로 확인해보려면 build하고 npm start를 해보면 된다.

500에러 페이지는 pages아래에 404.js 파일처럼 만들지 않고 _error.js 파일을 만들어서 처리할 것이다.

이제 없는 페이지를 들어갔을 때는 404에러가 나오고 views/33333333 이런 페이지에 접속하면 서버에러가 발생해서 500에러 페이지가 나온다.

왜 404는 static으로 만들고 500에러는 _error.js 파일을 보여줄까?
서버에러 페이지를 정적으로 제공하지 않는 이유는 에러가 발생했을 때 서버쪽으로 에러를 보내는 경우가 많기 때문이다.(어떤 에러다라는걸 로그에 남기고 리포팅하기 용도)

환경에 따른 분기처리

예를 들어 개발환경(테스트용 데이터)에서는 A리스트가 나와야 하고 실제 배포되어있는 서버에서는 B라는 리스트가 나와야할 때 유용하다.

1. 파일을 만든다.
   개발용 : .evn.development
   배포용 : .env.production

2. 사용법은 server와 client단이 다르다.
   server(node.js) : process.env.변수명
   client : process.env.NEXT_PUBLIC_변수명

3. .env.development 파일에 아래와같이 한번 적어본다.

name=DEVELOMENT // node.js 환경에서 log찍어볼 것이다.
NEXT_PUBLIC_API_URL=http://~~~ // browser에서 써먹어보자.