[nextjs] getStaticProps이 실행되지 않는다...

getStaticPaths은 잘 실행되었는데.. getStaticProps에서 console.log 결과가 보이지 않는다..

// pages/building/[id].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
import { Building } from '@/types/common-types';
import { getAllBuildings, getBuilding } from 'helper/api-utils';
import { ParsedUrlQuery } from 'querystring';

interface BuildingProps {
  building: Building;
}

interface Params extends ParsedUrlQuery {
  id: string;
}

const Building: React.FC<BuildingProps> = (props) => {
  return (
    <div>
      <h3>{props.building.name}</h3>
      <p>building address: {props.building.address}</p>
    </div>
  );
};

export default Building;

export const getStaticProps: GetStaticProps = async (context) => {
  console.log('I am here...!!!');
  const { params } = context;
  const { id } = params as Params;
  const data = await getBuilding(id);

  return {
    props: {
      building: data,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const data = await getAllBuildings(); // fetch data
  const paths = data.map((building) => ({
    params: {
      id: building.id.toString(),
    },
  }));
  return {
    paths,
    fallback: false,
  };
};

위 코드를 보면 getStaticPaths에서 params를 생성해서 return해주고 있다. paths를 console.log로 찍어보니 잘 나오는 것은 확인하였다.

문제상황

/building/1의 화면에서 404가 뜨길래, getStaticProps에 console.log를 찍어보았다. 하지만 server terminal에서는 아무런 log가 찍히지 않았다.

원인발견

어이 없게도 fetch data에는 id: 1의 데이터가 없었다. (즉 json의 id value가 2부터 시작하는 상황이었음), 생성되지 않은 params에 대해서는 fallback true로 처리를 해줬어야 했는데, 나는 완벽한 json데이터를 갖고 있다고 착각해서 벌어진 상황이었다.

완성코드

fallback을 true로 하고, building이 없는 경우에 getStaticProps의 return을 빈 object로 넘겨줬다. /building/1의 화면에서 Not Found! 가 랜더링 되는 것을 확인하였다.

const Building: React.FC<BuildingProps> = (props) => {
  if (!props.building) {
    return <p>Not Found!</p>;
  }

  return (
    <div>
      <h3>{props.building.name}</h3>
      <p>building address: {props.building.address}</p>
    </div>
  );
};

export default Building;

export const getStaticProps: GetStaticProps = async (context) => {
  const { params } = context;
  const { id } = params as Params;
  const data = await getBuilding(id);

  if (!data) {
    return {
      props: {},
    };
  }

  return {
    props: {
      building: data,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const data = await getAllBuildings();
  const paths = data.map((building) => ({
    params: {
      id: building.id.toString(),
    },
  }));
  return {
    paths,
    fallback: true,
  };
};