Pembaruan untuk Next.js modern (9.4+)

Anda dapat dengan aman menggunakan fs dalam getStaticProps atau getServerSideProps , tidak diperlukan konfigurasi tambahan . Pastikan Anda mereferensikan variabel dalam siklus hidup data Anda sehingga pohon diguncang dengan benar.

Anda dapat menggunakan alat ini untuk mempelajari cara kerjanya secara visual!

Jika Anda masih membangun versi Next.js lama dengan getInitialProps , baca di bawah

Kode yang diberikan tidak valid -- file ini tidak akan pernah tersedia di sisi klien selama rendering:

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

Ingat, Anda hanya dapat melakukan operasi terkait FS saat _di server_. Ini berarti Anda tidak dapat menggunakan fs saat merender.

Jika Anda menggunakan fs , pastikan itu hanya dalam getInitialProps .

Anda mungkin juga perlu membuat file next.config.js dengan konten berikut agar bundel klien dapat dibuat:

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

    return config
  }
}

Saya memiliki masalah yang sama pada instalasi lokal saya yang praktis Vanilla, namun dalam contoh dari nextjs ini sepertinya tidak menjadi masalah
https://github.com/zeit/next.js/tree/5787cbd9de33ea9add7cadeb04689b0d4b02976d/examples/blog-starter

apa yang membuatnya berfungsi di sana tanpa memodifikasi file konfigurasi?

Hanya gunakan fs di getStaticProps / getServerSideProps karena itu dihilangkan dari bundel browser.

Saya menemukan apa masalahnya. Jika saya mengimpor fungsi yang menggunakan fs , tetapi tidak menjalankan/menggunakan fungsi di dalam getStaticProps, itu akan dimasukkan ke dalam bundel browser. Setelah fungsi direferensikan di dalam getStaticProps itu akan berhenti muncul di bundel browser.

Saya kira ada beberapa logika tersembunyi yang menghapus impor yang digunakan di getStaticProps tetapi tidak digunakan dalam ekspor utama. Saya menghabiskan beberapa jam men-debug sampai saya bisa mereproduksi, mungkin layak memiliki sidenote di suatu tempat di dokumen :)

Bukankah logika tersembunyi hanya pohon webpack yang bergetar? Masuk akal jika Anda memikirkannya, Next tidak mengimpor getStaticProps di bundel browser, jadi itu menghapus fungsi impor yang digunakan di dalamnya.

Jika Anda tidak mereferensikannya di mana pun, saya kira webpack menganggap Anda mengimpornya untuk efek samping, jadi itu masih menyertakannya di setiap bundel.

Bukankah logika tersembunyi hanya pohon webpack yang bergetar? Masuk akal jika Anda memikirkannya, Next tidak mengimpor getStaticProps di bundel browser, jadi itu menghapus fungsi impor yang digunakan di dalamnya.

Jika Anda tidak mereferensikannya di mana pun, saya kira webpack menganggap Anda mengimpornya untuk efek samping, jadi itu masih menyertakannya di setiap bundel.

Tidak, pengocokan pohon webpack tidak cukup canggih untuk mengguncang ekspor ini dengan cara itu. GetStaticProps / getServerSideProps / getStaticPaths yang bergetar ditangani oleh plugin Babel khusus yang kami buat: https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/plugins/next-ssg-transform .ts

Oh terima kasih atas penunjuknya, sepertinya saya melebih-lebihkan webpack :)

Adakah alasan mengapa ini terjadi dari _within_ getServerSideProps ?

Halo semua. Seperti @aloukissas saya memiliki masalah yang sama ketika menggunakan dotenv dalam index.js getStaticProps() . Itu diselesaikan ketika menambahkan file next.config.js seperti yang ditunjukkan pada komentar awal @Timer .

Ada petunjuk mengapa ini terjadi? Saya menghapus Next.js v.9.4.0

Terima kasih!

Saya mengalami kesalahan ini saat menggunakan fast-glob .

Saya menggunakan alat hebat ini untuk memahami kode yang dibundel di sisi klien.

Ternyata, saya mengimpor variabel dari file yang menggunakan fast-glob yang secara internal menggunakan fs tetapi saya tidak menggunakan variabel di mana pun di dalam getStaticProps sehingga file mengimpor fast-glob tidak dihilangkan.

Sebuah contoh:

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

Seperti yang Anda lihat, saya tidak menggunakan BLOG_PATH di mana pun di index.js tetapi masih mengimpornya. Saya hanya menggunakan blogFilePaths jadi itu memberi saya kesalahan ini.

Untuk konteks lebih lanjut → https://github.com/vercel/next.js/discussions/17138

Terima kasih @deadcoder0904 ini kode saya:

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} />}
    />
  )
}

Alat yang Anda sebutkan menunjukkan import 'dotenv/config' disertakan dalam kode klien, dan mungkin itu yang membuat kesalahan muncul. Masalahnya adalah saya membutuhkannya untuk membaca dari variabel env.

Mungkin ada cara lain yang lebih baik untuk melakukannya, saya masih belajar Next.js :)

@ig-perez Pada Next v9.4, mereka memiliki cara bawaan untuk memuat variabel lingkungan → https://nextjs.org/docs/basic-features/environment-variables

Saya sarankan Anda membaca dokumen untuk menemukan solusinya :)

Itu luar biasa, saya melewatkan bagian itu di dokumen, terima kasih! Saya akan memperbarui kode saya 👍🏽