프로덕션에서 Next.js 정적 웹 사이트를 구축할 때 가져오기 오류가 발생하는 이유는 무엇입니까?

프로덕션에서 Next.js용 정적 웹 사이트를 생성하는 중 오류 발생

Next.js 사용자는 프로덕션용 정적 웹 사이트를 구축할 때 가져오기 오류가 발생할 수 있습니다. (npm run build) 기능적 개발 설정(npm run dev)이 있음에도 불구하고. 이 문제는 getStaticProps 또는 getStaticPath 함수 내의 API 경로에서 데이터를 가져올 때 발생합니다.

근본 원인

Next.js는 호스팅 환경에 배포하기 전에 서버에 설치하세요. 그러나 일반적으로 동적 데이터 검색에 사용되는 API 경로는 서버가 아직 활성화되지 않았기 때문에 빌드 프로세스 중에는 사용할 수 없습니다.

해결 방법

해결 방법 이 문제가 발생하면 getStaticProps/getStaticPath 함수 내에서 내부 API 경로에 액세스하지 마세요. 이러한 기능은 서버측에서만 작동하며 외부 네트워크 요청에 의존해서는 안 됩니다.

권장 접근 방식

대신, getStaticProps/getStaticPath 내에 서버측 코드를 직접 삽입하세요. 데이터 소스에서 데이터를 가져옵니다. 이러한 함수는 서버에서 실행되므로 데이터베이스에 액세스하거나 서버 측 작업을 수행하는 것이 허용됩니다.

리팩토링 예시

제공된 코드에서 수정된 getStaticProps를 찾을 수 있습니다. 아래 getStaticPaths 함수는 다음과 같습니다.

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,
    }
}

이러한 변경 사항을 구현하면 다음과 같은 문제를 제거할 수 있습니다. 프로덕션 빌드 중에 발생한 가져오기 오류.

위 내용은 프로덕션에서 Next.js 정적 웹 사이트를 구축할 때 가져오기 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!