최신 Next.js 업데이트(9.4+)

getStaticProps 또는 getServerSideProps 내에서 fs 안전하게 사용할 수 있으며 추가 구성이 필요하지 않습니다 . 데이터 수명 주기에서 변수를 참조하여 올바르게 트리가 흔들릴 수 있도록 하십시오.

이 도구 를 사용하여 작동 방식을 시각적으로 배울 수 있습니다!

getInitialProps 로 레거시 Next.js 버전을 계속 구축하고 있다면 아래를 읽어보세요 👇

제공된 코드가 유효하지 않습니다. 이 파일은 렌더링하는 동안 클라이언트 측에서 사용할 수 없습니다.

https://github.com/TidyIQ/nextjs-issue/blob/aef67b12d91d299d0978550005a40cbb34f74b71/pages/index.js#L5

_서버에서_하는 동안에만 FS 관련 작업을 수행할 수 있음을 기억하십시오. 즉, 렌더링하는 동안 fs 를 사용할 수 없습니다.

fs 를 사용하는 경우 getInitialProps 내에 있어야 합니다.

빌드할 클라이언트 번들을 가져오려면 다음 콘텐츠로 next.config.js 파일을 생성해야 할 수도 있습니다.

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}

내 로컬, 실질적으로 바닐라 설치에 동일한 문제가 있지만 nextjs의 예제에서는 문제가 되지 않는 것 같습니다.
https://github.com/zeit/next.js/tree/5787cbd9de33ea9add7cadeb04689b0d4b02976d/examples/blog-starter

구성 파일을 수정하지 않고 작동하는 이유는 무엇입니까?

getStaticProps / getServerSideProps는 브라우저 번들에서 제거되므로 fs 만 사용하십시오.

무엇이 문제인지 알아냈습니다. fs 사용하는 함수를 가져오지만 getStaticProps 내부에서 함수를 실행/사용하지 않으면 브라우저 번들에 포함됩니다. 함수가 getStaticProps 내에서 참조되면 브라우저 번들에 표시되지 않습니다.

getStaticProps에서 사용되지만 기본 내보내기에서는 사용되지 않는 가져오기를 제거하는 숨겨진 논리가 있는 것 같습니다. 재현할 수 있을 때까지 디버깅에 몇 시간을 보냈습니다. 문서 어딘가에 참고할 가치가 있을 것입니다. :)

히든 로직은 그냥 웹팩의 트리 떨림 아닌가요? 생각할 때 의미가 있습니다. Next는 브라우저 번들에서 getStaticProps 를 가져오지 않으므로 여기에 사용된 가져온 기능을 제거합니다.

아무데도 참조하지 않으면 webpack이 부작용을 위해 가져온 것으로 간주하므로 모든 번들에 여전히 포함됩니다.

히든 로직은 그냥 웹팩의 트리 떨림 아닌가요? 생각할 때 의미가 있습니다. Next는 브라우저 번들에서 getStaticProps 를 가져오지 않으므로 여기에 사용된 가져온 기능을 제거합니다.

아무데도 참조하지 않으면 webpack이 부작용을 위해 가져온 것으로 간주하므로 모든 번들에 여전히 포함됩니다.

아니요, 웹팩 트리 쉐이킹은 이러한 내보내기를 그런 식으로 흔들 만큼 정교하지 않습니다. 트리 쉐이킹 getStaticProps / getServerSideProps / getStaticPaths는 우리가 만든 이 커스텀 Babel 플러그인에 의해 처리됩니다: https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/plugins/next-ssg-transform .ts

오 포인터 주셔서 감사합니다. 웹팩을 과대 평가 한 것 같습니다. :)

이것이 _within_ getServerSideProps 에서 일어나는 이유가 무엇입니까?

안녕 모두. @aloukissas 처럼 내 index.js getStaticProps() 내에서 dotenv 사용할 때도 동일한 문제가 있습니다. @Timer 초기 주석과 같이 next.config.js 파일을 추가하면 해결됩니다.

왜 이런 일이 일어나는지 단서가 있습니까? 나는 Next.js v.9.4.0을 부르고 있다

감사 해요!

fast-glob 를) 사용하는 동안 이 오류가 발생했습니다.

이 훌륭한 도구 를 사용하여 클라이언트 측에서 번들로 제공되는 코드를 이해했습니다.

결과적으로 내부적으로 fs 를 사용하는 fast-glob 를 사용하는 파일에서 변수를 가져오고 있었지만 getStaticProps 내부의 어느 곳에서도 변수를 사용하지 않았으므로 파일이 fast-glob 가져옵니다

예:

mdxUtils.js

import glob from 'fast-glob'
import path from 'path'

export const BLOG_PATH = path.join(process.cwd(), 'posts')
export const blogFilePaths = glob.sync(`${BLOG_PATH}/blog/**/*.mdx`)

index.js

import { BLOG_PATH, blogFilePaths } from './mdxUtils'

export const getStaticProps = () => {
  const posts = blogFilePaths.map((filePath) => {
    ...
  }
  return { props: { posts } }
}

당신은 내가 사용하지 않는거야 볼 수 있듯이 BLOG_PATH 어디에서 index.js 하지만 여전히 그것을 가져. 나는 blogFilePaths 만 사용하고 있으므로이 오류가 발생했습니다.

자세한 내용은 → https://github.com/vercel/next.js/discussions/17138

감사합니다 @deadcoder0904 이것은 내 코드입니다:

import Layout from '../components/template'
import Main from '../components/main'
import Menu from '../components/menu'
import 'dotenv/config'

export async function getStaticProps () {
  const avatarLocation = process.env.AVATAR_URL
  const avatarTitle = process.env.AVATAR_TITLE

  return {
    props: {
      avatarLocation,
      avatarTitle
    }
  }
}

export default function RenderMainPage ({ avatarLocation, avatarTitle }) {
  return (
    <Layout
      avatarURL={avatarLocation}
      topLeft={<Menu />}
      middle={<Main avatarURL={avatarLocation} avatarTitle={avatarTitle} />}
    />
  )
}

언급한 도구는 import 'dotenv/config' 가 클라이언트 코드에 포함되어 있으며 아마도 오류를 표시하고 있는 것으로 보입니다. 문제는 env 변수에서 읽기 위해 필요하다는 것입니다.

아마도 다른 더 나은 방법이 있을 것입니다. 저는 여전히 Next.js를 배우고 있습니다. :)

@ig-perez Next v9.4부터 환경 변수를 로드하는 방법이 내장되어 있습니다 → https://nextjs.org/docs/basic-features/environment-variables

솔루션을 찾으려면 문서를 읽는 것이 좋습니다. :)

굉장합니다. 문서에서 그 부분을 놓쳤습니다. 감사합니다! 코드를 업데이트하겠습니다 👍🏽