javascript - How to store files in production in Next.js? - Stack Overflow

admin管理员组

文章数量:1400090

I have a file exchange Next.js app that I would like to deploy. In development whenever a file is dropped, the app stores the file in root public folder, and when the file is downloaded the app takes it from there as well using the <a> tag with href attribute of uploads/{filename}. This all works pretty well in development, but not in production.

I know that whenever npm run build is run, Next.js takes the files from the public folder and the files added there at runtime will not be served.

The question is, are there any ways of persistent file storage in Next.js apart from third party services like AWS S3?

I have a file exchange Next.js app that I would like to deploy. In development whenever a file is dropped, the app stores the file in root public folder, and when the file is downloaded the app takes it from there as well using the <a> tag with href attribute of uploads/{filename}. This all works pretty well in development, but not in production.

I know that whenever npm run build is run, Next.js takes the files from the public folder and the files added there at runtime will not be served.

The question is, are there any ways of persistent file storage in Next.js apart from third party services like AWS S3?

• javascript
• file
• deployment
• next.js

Share Improve this question Follow edited Feb 24, 2024 at 23:38 Viral Gajera 2411 silver badge66 bronze badges asked Aug 17, 2021 at 11:07 Tymofii KovalTymofii Koval 18311 gold badge11 silver badge99 bronze badges 1

• 2 Create a custom server: nextjs/docs/advanced-features/custom-server github./vercel/next.js/issues/12656#issuement-641025110 – brc-dd Commented Aug 17, 2021 at 12:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

next in node runtime is NodeJS, thus If your cloud provider allows create persistent disk and mount it to your project, then you can do it:

e.g. pages/api/saveFile.ts:

import { writeFileSync } from 'fs';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    const { path = null } = req.query;
    if (!path) {
        res.status(400).json({ name: 'no path provided' })
    } else {
        // your file content here
        const content = Date.now().toString();
        writeFileSync(`/tmp/${path}.txt`, content);
        res.json({
            path,
            content
        })
    }
}

/tmp works almost in every cloud provider (including Vercel itself), but those files will be lost on next deployment; instead you should use your mounted disk path

pages/api/readFile.ts

import { readFileSync } from 'fs';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    const { path = '' } = req.query;
    if (!path) {
        res.status(400).json({ name: 'wrong' })
    } else {
        res.send(readFileSync(`/tmp/${path}`));
    }
}

Live running example:

fetch('https://eaglesdoc.vercel.app/api/writefile?path=test')
.then(res => res.text()).then(res => console.log(res)).then( () => 
fetch('https://eaglesdoc.vercel.app/api/readfile?path=test'))
.then(res => res.text()).then(res => console.log(res))

Next.js does allow file storage at buildtime, but not at runtime. Next.js will not be able to fulfill your file upload requirement. AWS S3 is the best option here.

本文标签： javascriptHow to store files in production in NextjsStack Overflow