Next.js 정적 웹사이트 제작 빌드 중에 가져오기 오류가 발생하는 이유는 무엇입니까?

Next.js 정적 웹사이트 프로덕션 빌드 중 가져오기 오류

프로덕션에서 Next.js 웹사이트를 구축할 때 실행 시에는 발생하지 않는 가져오기 오류가 발생할 수 있습니다. 개발 모드. 이는 실망스럽고 혼란스러울 수 있습니다.

오류 이해하기

"FetchError: 잘못된 json 응답 본문..." 오류 메시지는 종종 API 경로에서 반환된 JSON 응답에 문제가 있음을 나타냅니다. . 특히, "위치 0의 JSON에서 예기치 않은 토큰 T" 오류는 서버가 잘못된 JSON 데이터를 반환하고 있음을 나타냅니다.

원인 및 해결 방법

내부 API 경로 호출

Next.js에서는 getStaticProps 내에서 내부 API 경로를 호출하지 않는 것이 중요합니다. 서버가 아직 시작되지 않았기 때문에 빌드 시간 동안 내부 API 경로를 사용할 수 없습니다.

해결 방법: getStaticProps의 API 경로 호출을 필요한 작업을 수행하는 직접 서버측 코드로 교체하세요. 데이터 가져오기.

절대 URL 가져오기

next.config.js에서 assetPrefix를 제거하는 경우 가져오기에 사용된 URL이 절대적인지 확인하세요. 프로덕션 빌드에서는 상대 URL이 작동하지 않을 수 있습니다.

해결책: 절대 URL을 사용하도록 가져오기 호출을 수정하세요.

코드 리팩터링

다음은 리팩터링된 내용입니다. 이를 피하는 코드 버전 오류:

// pages/product/[slug]
import db from '../../../data/products'

// Remaining code...

export const getStaticProps = async ({ params: { slug }, locale }) => {
  const result = db.filter(item => item.slug === slug);
  const data = result.filter(item => item.locale === locale)[0];
  const { title, keywords, description } = data;
  return {
    props: {
      data,
      description,
      keywords,
      title,
    },
  };
};

export const getStaticPaths = async () => {
  const paths = db.map(({ slug, locale }) => ({ params: { slug }, locale }));
  return {
    fallback: true,
    paths,
  };
};

결론

Next.js 프로덕션 빌드 중 가져오기 오류의 원인을 이해하고 적절한 솔루션을 적용하면 정적 웹 사이트를 성공적으로 배포할 수 있습니다. getStaticProps에서 내부 API 경로 호출을 피하고, 가져오기에 절대 URL을 사용하고, 프로덕션 빌드에서 데이터를 가져오는 데 직접 서버 측 코드를 선호하는 것을 기억하세요.

위 내용은 Next.js 정적 웹사이트 제작 빌드 중에 가져오기 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!