How to read FormData in NextJS

Reading the FormData object in Next.js typically occurs during form submission handling in client-side JavaScript. However, since Next.js is a server-side rendering framework, we can also handle FormData in API routes.

Here are examples of how to handle FormData in both scenarios:

Client-Side JavaScript Handling of FormData

On the client side, you can use the native FormData API to handle form data.

javascript
// Assume you have a form element, as follows:
// <form id="myForm">
//   <input type="text" name="username" />
//   <input type="password" name="password" />
//   <input type="submit" />
// </form>

document.getElementById('myForm').addEventListener('submit', async (event) => {
  event.preventDefault();
  const form = event.target;
  const formData = new FormData(form);

  // Use the fetch API to send data to your API route
  const response = await fetch('/api/yourApiRoute', {
    method: 'POST',
    body: formData, // Send the FormData object directly as the body
  });

  const result = await response.json();
  console.log(result);
});

Handling FormData in Next.js API Routes

On the server side, we typically do not directly handle FormData because it is a client-side API. However, if you need to handle multipart/form-data in the raw request body within Next.js API routes, you can use third-party libraries such as multiparty or formidable to parse FormData.

Here is an example of a Next.js API route using the formidable library:

First, install the formidable library:

bash
npm install formidable

Then, create an API route in pages/api/yourApiRoute.js to handle FormData:

javascript
import formidable from 'formidable';

export const config = {
  api: {
    bodyParser: false, // Disable Next.js's default JSON request body parsing
  },
};

export default async function handler(req, res) {
  const form = new formidable.IncomingForm();

  form.parse(req, (err, fields, files) => {
    if (err) {
      res.status(500).json({ error: "Something went wrong during form parsing" });
      return;
    }

    // The fields parameter contains all form text fields, while the files parameter contains all file information
    res.status(200).json({ fields, files });
  });
}

In this example, we disable Next.js's default JSON request body parsing and instead use formidable to parse multipart/form-data. The form.parse() function asynchronously parses the request body and invokes a callback upon completion. The fields parameter in the callback contains all form text fields, while the files parameter contains all file information.

Note that handling file uploads involves security risks. Ensure you validate and process uploaded files to avoid security vulnerabilities.