`getStaticProps` 및 `getStaticPaths`를 사용하여 Next.js 정적 사이트 컴파일 중에 가져오기 오류가 발생하는 이유는 무엇입니까?

Next.js 정적 사이트 컴파일 시 Fetch 오류 원인 찾기

Next.js를 사용하여 정적 웹 사이트를 구축할 때 필수입니다. 빌드 프로세스 중에 발생할 수 있는 특정 오류의 원인을 파악합니다. 이 경우 getStaticProps 및 getStaticPaths를 모두 활용하여 API 경로에서 데이터를 검색할 때 npm 실행 빌드 중에 직면하는 특정 문제를 해결하겠습니다.

오류 세부 정보

발생하는 주요 오류는 npm run build를 실행할 때 API 경로에서 수신된 잘못된 JSON 응답과 관련되어 있습니다. 이 응답은 API 경로 페이지/api/products/[slug].js에서 발생한 것으로 보입니다.

가능한 원인

1. 잘못된 API 라우팅 : 페이지/api/products/[slug].js의 구현을 철저히 검사하여 다음과 같은지 확인하세요. 데이터를 적절하게 가져와서 처리합니다. 이 코드에 실수가 있으면 잘못된 JSON 응답이 발생할 수 있습니다.
2. API 경로 가용성: 빌드 프로세스 중에는 API 경로에 액세스할 수 없다는 점에 유의하세요. 따라서 getStaticProps 또는 getStaticPaths 함수가 데이터를 얻기 위해 API 경로에 의존하는 경우 오류가 발생할 수 있습니다.

권장 해결 방법

이 문제를 해결하려면, 다음에서 코드를 리팩토링하는 것을 고려하십시오. 방식:

1. 서버측 로직 활용: getStaticProps는 서버측에서만 작동하므로 서버측 로직을 이러한 함수에 직접 통합하여 API 경로를 우회할 수 있습니다. 이렇게 하면 API 경로에서 데이터를 가져올 필요가 없고 대신 데이터를 직접 검색할 수 있습니다.
2. 서버에서 데이터 검색: 이 경우 저장된 데이터 소스에 직접 액세스합니다. 데이터/제품, getStaticProps 및 getStaticPaths 내. 다음과 같이 기능을 수정하세요.

// /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: slug },
    locale,
  }));
  return {
    fallback: true,
    paths,
  };
};

이러한 변경 사항을 적용하면 API 경로에 대한 의존도가 사라지고 잘못된 JSON 응답 오류가 해결되며 원활한 정적 웹사이트 컴파일이 가능해집니다.

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