Write files to public folder at runtime

[balazsorban44]

My page should render a QR code. The data API gives me an URL for which I create an svg QR code string with QrCode.toString() in my getStaticProps method.

Here is the code I came up with:

// getStaticProps
//...
if (page.qrCodeUrl) {
  try {
    const img = await QRCode.toString(page.qrCodeUrl, {type: "svg"})
    const path = upath.join(process.cwd(), "public/qr", url) //eg. /public/qr/path/to/page/
    await fs.promises.mkdir(path, { recursive: true })
    await fs.promises.writeFile(upath.join(path, "qr.svg"), img) // creates /public/qr/path/to/page/qr.svg
  } catch (error) {
    throw {
      error,
      message: `QRCodeError: ${error.message}`,
    }
  }
}

return ({
  props: {
//...
  }
})
//...

Using https://nextjs.org/docs/basic-features/static-file-serving as a source, in my page [...slug].js I do the following:

//... src is /qr/path/to/page/qr.svg
<img alt="QR code" src={`/qr${url}qr.svg`}/>
//...

This works in development, but not in production.

Any ideas? 💡

NOTE: I am also interested in other solutions. The main reason I am doing the converting in getStaticProps, so I don't have to ship the qrcode js bundle to the client!

UPDATE:
The above code actually works, but only after I restart the production server, which is not feasible after each qr code generation. 🤔

[balazsorban44]

Answered by #17203