[NEXT] 4강 에러 페이지, 환경 변수 + 6강 isFallback, getStaticPaths

타이틀 링크를 클릭하면 해당 주차 강의 코드가 정리된 깃허브로 연결됩니다.

4강 에러 페이지, 환경 변수 (Custom Error Page, Environment Variables)

에러 페이지 핸들링

• 404 에러

// pages.404.js
import { Icon } from "semantic-ui-react";

export default function Error404() {
  return (
    <div style={{ padding: "200px 0", textAlign: "center", fontSize: 30 }}>
      <Icon name="warning circle" color="red" />
      404 : 페이지를 찾을 수 없습니다.
    </div>
  );
}

• 기타 에러 - 클라이언트, 서버 측 에러 핸들링 가능

// 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;

.env

//node.js
process.env.변수명
// getServerSideProps 등 서버 환경 이용할 때 이렇게 사용.
// [id].js의 getServerSideProps(context)에서 props에 name: process.env.name, 넣어줌.
// Post에서 props로 넘겨주면 name 사용 가능. 

//browser
process.env.NEXT_PUBLIC_변수명
// 클라이언트쪽에서 사용.
// index.js의 API_URL 바꿈: const API_URL = process.env.NEXT_PUBLIC_API_URL;

6강 isFallback, getStaticPaths

const Post = ({ item, name }) => {
  const router = useRouter();

  // isFallback 상태면 로더 보여줌
  if (router.isFallback) {
    return (
      <div style={{ padding: "100px 0" }}>
        <Loader active inline="centered">
          Loading
        </Loader>
      </div>
    );
  }
    //return 생략
};

export async function getStaticPaths() {
  const apiUrl = process.env.apiUrl;
  const res = await Axios.get(apiUrl);
  const data = res.data;

  return {
    // 직접 지정해주는 것보다 실제로는 api 요청해오는 게 현실적.
    paths: data.slice(0, 9).map((item) => ({
      params: {
        id: item.id.toString(),
      },
    })),
    fallback: true,
  };
}

 

 

코딩앙마의 NEXT 강의를 정리한 내용입니다