Mengelola Akses File Lokal untuk Tindakan Server Next.js 14.1 di Vercel

Memperbaiki Masalah Akses File di Tindakan Server Next.js 14.1 Menggunakan Berbagai Metode

Untuk mengakses file lokal dalam produksi dengan aman, solusi ini menggunakan backend Node.js dengan rute API.

const { PDFDocument } = require('pdf-lib');
const fs = require('fs');
const path = require('path');
export default async function handler(req, res) {
  try {
    const pdfDataDir = path.join(process.cwd(), 'actions', 'pdf_data');
    const templatePath = path.join(pdfDataDir, 'template.pdf');
    const pdfDoc = await PDFDocument.load(fs.readFileSync(templatePath));
    const pdfBytes = await pdfDoc.save();
    res.setHeader('Content-Type', 'application/pdf');
    res.status(200).send(pdfBytes);
  } catch (error) {
    res.status(500).send('Error generating PDF');
  }
}

Selanjutnya, gunakan Konfigurasi Webpack Modular untuk menyalin file. Pembuatan Produksi untuk JavaScript

Untuk menjamin bahwa file lokal digabungkan dengan benar dalam produksi, pendekatan ini mengubah pengaturan Webpack.

const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (!dev && isServer) {
      config.plugins.push(
        new CopyPlugin({
          patterns: [{
            from: path.join(__dirname, 'actions', 'pdf_data'),
            to: path.join(__dirname, '.next', 'server', 'actions', 'pdf_data'),
          }],
        })
      );
    }
    return config;
  },
};

Mengakses File Secara Dinamis Menggunakan Rute API, Bukan Tindakan Server

Dengan metode ini, kami menggunakan rute API alih-alih akses file dinamis untuk menyediakan penyajian file lokal yang siap produksi.

import { promises as fs } from 'fs';
import path from 'path';
export default async function handler(req, res) {
  try {
    const pdfDataDir = path.join(process.cwd(), 'actions', 'pdf_data');
    const filePath = path.join(pdfDataDir, 'template.pdf');
    const file = await fs.readFile(filePath);
    res.setHeader('Content-Type', 'application/pdf');
    res.status(200).send(file);
  } catch (err) {
    res.status(500).send('Error loading file');
  }
}

Tes Unit untuk Akses File di Rute API

Pengujian unit ini mengonfirmasi bahwa file PDF disajikan dengan tepat oleh rute API.

import handler from '../pages/api/generate-pdf';
import { createMocks } from 'node-mocks-http';
describe('PDF Generation API', () => {
  it('should return a PDF', async () => {
    const { req, res } = createMocks({ method: 'GET' });
    await handler(req, res);
    expect(res._getStatusCode()).toBe(200);
    expect(res._getHeaders()['content-type']).toBe('application/pdf');
  });
});

Pertanyaan Umum tentang Menangani File Lokal di Tindakan Server Next.js

1. Bagaimana cara memastikan file lokal tersedia dalam produksi?
2. Dengan menyertakan CopyPlugin dalam konfigurasi Webpack, Anda dapat memastikan bahwa aset lokal, seperti PDF dan font, digabungkan ke dalam build dan dapat diakses.
3. Mengapa saya mendapatkan kesalahan ENOENT dalam produksi?
4. Alasan kesalahan ini adalah dalam sistem seperti Vercel, file atau direktori yang Anda coba akses tidak disertakan dalam versi produksi.
5. Saya ingin mengakses file, namun bisakah saya menggunakan rute API alih-alih tindakan server?
6. Ya, Anda mungkin memiliki kontrol tambahan dan jaminan bahwa file disediakan dengan benar di lingkungan produksi dengan mentransfer fungsionalitas akses file ke rute API.
7. Apa peran process.cwd() di jalur file?
8. process.cwd() menyediakan direktori kerja saat ini, membantu pembuatan jalur file secara dinamis, tidak bergantung pada variasi lingkungan.
9. Haruskah saya menggunakan @vercel/blob untuk penyimpanan file?
10. Meskipun @vercel/blob adalah sebuah opsi, hal ini dapat menyebabkan proses seperti produksi PDF menjadi lambat. Opsi yang lebih cepat dapat berupa rute API atau akses file langsung.

Pemikiran Akhir tentang Menangani Akses File Lokal

Mengakses file lokal bisa menjadi kesulitan besar saat menggunakan tindakan server di Next.js 14.1, khususnya di Vercel. Namun, pengembang dapat memastikan file mereka dikemas dan tersedia dalam produksi dengan menggunakan teknologi seperti CopyPlugin dan rute API Webpack.

Anda dapat menghindari masalah apa pun dengan berkonsentrasi pada teknik penanganan file dinamis, seperti mengalihkan fungsionalitas file ke rute API. Penelitian lebih lanjut mengenai teknik akses file dapat menghasilkan solusi yang lebih efektif untuk penerapan selanjutnya.