에러 페이지, 환경 변수

에러 페이지 설정

Next.js에서는 컴포넌트를 만들어 에러 페이지를 불러 오지 않는다.

에러페이지를 만약 필요할 때마다 서버에서 렌더링된 상태로 가져온다면,
그만큼 서버에 요청하는 것이 많아지고, 비용이 증가되어 퍼포먼스의 성능이 하락된다.

그래서 Next.js에서는 이런 에러 페이지를 정적(static)파일로 생성해서 제공해준다. 심지어 기본적으로 default로 제공해서 별다른 내용의 추가 없이 에러페이지를 불러 올 수 있다.

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;

위처럼 만들어 작성을 해두면 에러 상황마다 페이지를 만들어 주지 않아도 된다.

에러 상황을 서버에 알리거나 로그에 남겨야 할 때, 서버나 클라이언트에서 오는 에러를 모두 관리할 수 있게 된다.

환경 변수 설정

개발 버전과 공개 버전을 따로 구분해 두기 위해 환경에 따라 바뀌는 변수들을 동기화 처리 해주는 과정

Next.js는 별 다른 무언가를 해주지 않아도 환경변수를 쓸 수 있도록 해준다.

사용법은 NodeJs 환경과 브라우저 환경의 내용이 다르다.

//node.js
process.env.변수명
//browser
process.env.NEXTPUBLIC변수명