> 웹 프론트엔드 > JS 튜토리얼 > 프로덕션 환경에서 Next.js 정적 사이트를 구축할 때 '가져오기 오류'가 발생하는 이유는 무엇입니까?

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

Linda Hamilton
풀어 주다: 2024-12-03 00:50:16
원래의
736명이 탐색했습니다.

Why Do I Get a

프로덕션에서 Next.js 정적 웹사이트를 구축하는 동안 가져오기 오류

프로덕션을 위해 Next.js 웹사이트를 구축할 때 getStaticProps를 사용할 때 "가져오기 오류"가 발생할 수 있습니다. API 경로에서 데이터를 가져오는 getStaticPaths. 이 오류는 몇 가지 이유로 발생할 수 있습니다.

getStaticProps의 내부 API 경로 사용

제공된 코드에서 내부 API 경로 /api/products/${slug}를 호출합니다. , getStaticProps 내에서. 빌드 시간 동안 API 경로를 사용할 수 없어 가져오기 오류가 발생하므로 이는 권장되지 않습니다.

getStaticProps 및 getStaticPaths의 서버측 코드

API 경로를 가져오는 대신 다음을 작성해야 합니다. 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,
    }
}
로그인 후 복사

getStaticProps 및 getStaticPaths에서 직접 데이터 소스를 사용하면 빌드 시간 동안 내부 API 경로를 호출하지 않고 가져오기를 해결할 수 있습니다. 오류가 발생했습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿