आधुनिक Next.js के लिए अपडेट (9.4+)

आप सुरक्षित रूप से fs उपयोग getStaticProps या getServerSideProps , किसी अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता नहीं है । सुनिश्चित करें कि आप अपने डेटा जीवनचक्र में चर का संदर्भ दे रहे हैं ताकि यह सही ढंग से पेड़ हिल जाए।

आप इस टूल का उपयोग नेत्रहीन सीखने के लिए कर सकते हैं कि यह कैसे काम करता है!

अगर आप अभी भी 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
  }
}

मुझे अपने स्थानीय, व्यावहारिक रूप से वेनिला इंस्टॉल पर एक ही समस्या है, हालांकि नेक्स्टज के उदाहरणों में यह कोई समस्या नहीं है
https://github.com/zeit/next.js/tree/5787cbd9de33ea9add7cadeb04689b0d4b02976d/examples/blog-starter

कॉन्फ़िगरेशन फ़ाइल को संशोधित किए बिना यह वहां क्या काम करता है?

केवल fs का उपयोग getStaticProps / getServerSideProps में करें क्योंकि वे ब्राउज़र बंडल से समाप्त हो जाते हैं।

मुझे पता चला कि समस्या क्या थी। अगर मैं एक फ़ंक्शन आयात करता हूं जो fs का उपयोग करता है, लेकिन getStaticProps के अंदर फ़ंक्शन को चला/उपयोग नहीं करता है, तो यह ब्राउज़र बंडल में शामिल हो जाएगा। एक बार जब फ़ंक्शन getStaticProps के अंदर संदर्भित हो जाता है तो यह ब्राउज़र बंडल में दिखना बंद हो जाएगा।

मुझे लगता है कि कुछ छिपे हुए तर्क हैं जो getStaticProps में उपयोग किए गए आयात को हटा देते हैं लेकिन मुख्य निर्यात में अप्रयुक्त होते हैं। मैंने कुछ घंटे डिबगिंग में बिताए जब तक कि मैं पुन: पेश नहीं कर सकता, शायद डॉक्स में कहीं एक सिडेनोट होने के लायक :)

क्या छिपा हुआ तर्क सिर्फ वेबपैक का पेड़ नहीं हिल रहा है? जब आप इसके बारे में सोचते हैं तो समझ में आता है, अगला ब्राउज़र बंडल में getStaticProps आयात नहीं करता है, इसलिए यह इसमें प्रयुक्त आयातित फ़ंक्शन को हटा देता है।

यदि आप इसे कहीं भी संदर्भित नहीं करते हैं, तो मुझे लगता है कि वेबपैक मानता है कि आपने इसे साइड इफेक्ट्स के लिए आयात किया है, इसलिए यह अभी भी इसे प्रत्येक बंडल में शामिल करता है।

क्या छिपा हुआ तर्क सिर्फ वेबपैक का पेड़ नहीं हिल रहा है? जब आप इसके बारे में सोचते हैं तो समझ में आता है, अगला ब्राउज़र बंडल में getStaticProps आयात नहीं करता है, इसलिए यह इसमें प्रयुक्त आयातित फ़ंक्शन को हटा देता है।

यदि आप इसे कहीं भी संदर्भित नहीं करते हैं, तो मुझे लगता है कि वेबपैक मानता है कि आपने इसे साइड इफेक्ट्स के लिए आयात किया है, इसलिए यह अभी भी इसे प्रत्येक बंडल में शामिल करता है।

नहीं, वेबपैक ट्री शेकिंग इतना परिष्कृत नहीं है कि इन निर्यातों को इस तरह हिला सके। ट्री शेकिंग getStaticProps / getServerSideProps / getStaticPaths को हमारे द्वारा बनाए गए इस कस्टम बैबेल प्लगइन द्वारा नियंत्रित किया जाता है: https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/plugins/next-ssg-transform .ts

ओह पॉइंटर के लिए धन्यवाद, ऐसा लगता है कि मैंने वेबपैक को कम करके आंका है :)

किसी भी कारण से यह _within_ getServerSideProps से हो रहा होगा?

नमस्ते। @aloukissas की तरह मेरे पास dotenv का उपयोग करते समय मेरे index.js getStaticProps() भीतर एक ही समस्या है। next.config.js फ़ाइल जोड़ने पर यह हल हो जाता है जैसा कि @Timer प्रारंभिक टिप्पणी में दिखाया गया है।

ऐसा क्यों हो रहा है कोई सुराग? मैं Next.js v.9.4.0 . को हटा रहा हूं

धन्यवाद!

fast-glob का उपयोग करते समय मुझे यह त्रुटि हुई

क्लाइंट-साइड में बंडल किए जाने वाले कोड को समझने के लिए मैंने इस बेहतरीन टूल का उपयोग किया।

बाहर निकला, मैं एक फ़ाइल से एक चर आयात कर रहा था जो fast-glob का उपयोग करता है जो आंतरिक रूप से fs का उपयोग करता है लेकिन मैं 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 अगले v9.4 तक, उनके पास पर्यावरण चरों को लोड करने का एक अंतर्निहित तरीका है → https://nextjs.org/docs/basic-features/environment-variables

मेरा सुझाव है कि आप समाधान खोजने के लिए दस्तावेज़ पढ़ें :)

यह कमाल है, मैंने दस्तावेज़ों में उस हिस्से को याद किया, धन्यवाद! मैं अपना कोड अपडेट करूंगा