💣 Next.js_04 Custom Error Page, Environment Variables

Bori·2022년 1월 28일

Next.js

목록 보기

4/12

Next.js

코딩앙마 Next.js 강의를 보고 정리한 내용입니다.

🔪 Custom Error Page

404 error

404 page는 자주 사용되는 에러 페이지
=> 자주 사용되는 에러 페이지를 서버에서 렌더링 하면 서버의 부하가 증가
=> 이로인해 비용이 증가하고, 사용자들은 느리다는 느낌을 받는다.
Next.js는 static 404 page를 제공
=> 아무런 추가 작업 없이 default로 제공되는 페이지를 사용할 수 있다.
=> 디자인을 변경하고 싶거나 기타 다른 정보들도 함께 포함하고 싶은 경우, 수정이 필요

Customizing The 404 Page

pages/404.js 파일 생성
=> 이 파일은 build time에 정적 생성

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

// customizing
import { Icon } from "semantic-ui-react";

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

500 error

500 page도 404 page와 마찬가지로 Next.js에서 static 500 page를 제공

개발 모드에서는 서버 에러가 나면 로그를 보여줌
=> 어디서 에러가 발생했는지 알려줌

500 error(서버 에러)는 프로덕션 모드에서 확인해야 한다
=> 프로덕션 모드 : build를 한 후start를 한다.
=> 내 경우, yarn build, yarn start
=> 500 error 확인

More Advanced Error Page Customizing

Error component로 client-side error와 server-side error를 모두 관리할 수 있다.
=> _error.js 페이지는 정적으로 최적화 되어있지 않다.
=> 404는 static으로 처리 하는 것이 좋다
pages/_error.js 파일 생성

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

server-side error page를 정적으로 제공하지 않는 이유? => 에러 발생 시 서버 쪽으로 에러를 보내는 작업을 동반하는 경우가 많기 때문

🔪 Environment Variables

환경에 따라 변할 수 있는 값들을 분기 처리
=> 개발 환경에서는 A 리스트가 보여야 하지만 프로덕션 환경에서는 B 리스트가 보여져야 하는 것 등
=> 테스트로 운영하던 데이터가 실제 서비스에 나타나지 않도록 하기 위해
- .env : 모든 환경
- .env.development : 개발 환경
- .env.production : 프로덕션 환경
=> 최상위 폴더에 파일 생성

사용법

Environment Variables Examples

환경마다 사용법이 다름

// node js
process.env.변수명;

// browser
process.env.NEXT_PUBLIC_변수명;

//.env.development
// name : 노드 환경에서 사용
// NEXT_PUBLIC_API_URL : 브라우저 환경에서 사용
name=DEVELOPMENT
NEXT_PUBLIC_API_URL=http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline

// .env.production
// 브라우저 환경에 따라 API 경로를 구분해서 상품 리스트를 다르게 나오게 할 수 있다
// .env.development의 API url과 다른 url
name=PRODUCTION
NEXT_PUBLIC_API_URL=http://makeup-api.herokuapp.com/api/v1/products.json?brand=dior

browser 환경에서 NEXT_PUBLIC_API_URL 변수 분기처리
- pages/index.js 의 API_URL 수정
  => 브라우저 환경이라서 NEXT_PUBLIC_API_URL를 사용

// const API_URL =
//   "http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline";
const API_URL = process.env.NEXT_PUBLIC_API_URL;

node js 환경에서 name 변수를 분기처리
- getServerSideProps : 서버에서 동작 (브라우저 환경이 아니다)

import Axios from "axios";
import Head from "next/head";
import Item from "../../src/component/Item";

//  getServerSideProps를 통해 item을 받아올 수 있으므로
// name도 받아온다
const Post = ({ item, name }) => {
  return (
    <>
      {item && (
        <>
          <Head>
            <title>{item.name}</title>
            <meta name="description" content="item.description"></meta>
          </Head>
          // name을 통해 어떤 환경인지 확인
          <p>{name} 환경 입니다.</p>
          <Item item={item} />
        </>
      )}
    </>
  );
};

export default Post;

// getServerSideProps로 서버에서 데이터를 가져옴
export async function getServerSideProps(context) {
  const id = context.params.id;
  const apiUrl = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
  const res = await Axios.get(apiUrl);
  const data = res.data;

  return {
    props: {
      item: data,
      name: process.env.name, // props로 name 추가
    },
  };
}

개발 환경에서 보여주는 데이터

프로덕션 환경에서 보여주는 데이터

Bori

이전 포스트

💣 Next.js_03 Server-side Rendering/SSR

다음 포스트

💣 Improved next/link: Simplified API with automatic <a> | Next.js 13

2개의 댓글

dana

2022년 1월 28일

우아ㅏㅏㅏㅏ

1개의 답글