Next.js 심화 프로젝트 SEEWHAT 트러블슈팅 4

문제점 : build && start 하는 과정에서 지도랑 api 로 받아온 정보가 안보임

해결 방안 : 서버 컴포넌트에서 클라이언트 컴포넌트를 사용해서 에러가 생김

우리가 사용할 api 정보를 불러오기 위해선 서버 컴폰너트에 dynamic을 추가 해야한다. 

import { fetchTheaterDetail } from '@lib/theaterDetailApi/serverApi';
import TheaterMap from './_components/TheaterMap';
import CommentForm from '@components/common/CommentForm';
import TheaterInfoDetail from './_components/TheaterInfoDetail';
import TheaterConvenienceDetail from './_components/TheaterConvenienceDetail';

interface TheaterDetailProps {
  params: { id: string };
}

const TheaterDetailPage = async ({ params }: TheaterDetailProps) => {
  const { id } = params;

  const theaterInfo = await fetchTheaterDetail(id);

  return (
    <>
      <div className="mt-20 text-white  flex flex-col items-center">
        <section className="mt-20 px-4 flex flex-col md:flex-row justify-between gap-10 w-full  max-w-screen-xl mx-auto">
          {/* 공연장 정보 Section */}
          <div className="flex-1">
            <TheaterInfoDetail theaterInfo={theaterInfo} />
            <TheaterConvenienceDetail theaterInfo={theaterInfo} />
          </div>

          {/* 지도 Section */}
          <TheaterMap theaterInfo={theaterInfo} />
        </section>
      </div>
      
      <hr className="h-px bg-white border-0 my-10 max-w-screen-xl mx-auto" />
      
      {/* 댓글 Section */}
      <CommentForm />
    </>
  );
};

export default TheaterDetailPage;

 

이 페이지는 ssr로 랜더링이 되어야 하는데 그게 안됐기 때문에 에러가 난거임!!!!

export const dynamic = 'force-dynamic';

 

이거 한줄만 추가해주면 만사 해결!!!

 

import { fetchTheaterDetail } from '@lib/theaterDetailApi/serverApi';
import TheaterMap from './_components/TheaterMap';
import CommentForm from '@components/common/CommentForm';
import TheaterInfoDetail from './_components/TheaterInfoDetail';
import TheaterConvenienceDetail from './_components/TheaterConvenienceDetail';

interface TheaterDetailProps {
  params: { id: string };
}

export const dynamic = 'force-dynamic';

const TheaterDetailPage = async ({ params }: TheaterDetailProps) => {
  const { id } = params;

  const theaterInfo = await fetchTheaterDetail(id);

  return (
    <>
      <div className="mt-20 text-white  flex flex-col items-center">
        <section className="mt-20 px-4 flex flex-col md:flex-row justify-between gap-10 w-full  max-w-screen-xl mx-auto">
          {/* 공연장 정보 Section */}
          <div className="flex-1">
            <TheaterInfoDetail theaterInfo={theaterInfo} />
            <TheaterConvenienceDetail theaterInfo={theaterInfo} />
          </div>

          {/* 지도 Section */}
          <TheaterMap theaterInfo={theaterInfo} />
        </section>
      </div>
      
      <hr className="h-px bg-white border-0 my-10 max-w-screen-xl mx-auto" />
      
      {/* 댓글 Section */}
      <CommentForm />
    </>
  );
};

export default TheaterDetailPage;

 

해결 완!!

 

느낀점 : next.js 나 타입스크립트가 아직 익숙하지 않아서 신경쓸게 너무 많다.. 어렵지만... 앞으로 이 친구들한테 열심히 적응해봐야지!!!! 나중에는 타입스크립트 없으면 더 불편하다고 하니까!!! (아직은 믿을 수 없다) ㅋㅋㅋ