[Next.js] Error: Unexpected token 'I', "Internal S"... is not valid JSON

처음 보는 에러인데 수업 보고, 따라하고 하고있는데 에러가 났다.

 

 

[문제]

// app/movie/[id]/page.tsx

import { Suspense } from 'react';
import MovieInfo from '../../../components/movie_info';
import MovieVideo from '../../../components/movie_video';

export default async function MovieDetail({ params: { id } }: { params: { id: string } }) {
  return (
    <div>
      <h1>movie info</h1>
      <Suspense fallback={'loading....'}>
        <MovieInfo id={`${id}`} />
      </Suspense>
    </div>
  );
}

// component/movie/MovieInfo.tsx

import { POPULAR_MOVIE } from '../app/api/movie.api';

async function getMovie(id: string) {
  const res = await fetch(`${POPULAR_MOVIE}/${id}`);
  return res.json();
}

export default async function MovieInfo(id: string) {
  const movie = await getMovie(id);
  return <h2>{JSON.stringify(movie)}</h2>;
}

 

 

 

 

뭐가 문제일까요?

 

 

 

 

 

[해결]

props로 받는 아이디를 그냥 써서 난 에러였다.(function MovieInfo(id:string)) 에러가 난다면. 여기부분을 살펴보아요~

// component/movie/MovieInfo.tsx

import { POPULAR_MOVIE } from '../app/api/movie.api';

async function getMovie({id}:{id: string}) {
  const res = await fetch(`${POPULAR_MOVIE}/${id}`);
  return res.json();
}

export default async function MovieInfo({id}:{id: string}) {
  const movie = await getMovie(id);
  return <h2>{JSON.stringify(movie)}</h2>;
}