Nextjs Sending Form Data To Api Routes Complete Guide

Overview

In Next.js, API routes provide a simple way to handle API requests directly within your application without needing to set up an external backend server. To send form data from your client (React component) to these API routes, you typically use the fetch or axios library within a form submission handler. Below, we'll dive into the necessary steps and important information about this process.

Step-by-Step Guide

1. Create a Form Component

First, let's create a simple form that collects user data such as name and email, and then submits this data to an API route.

// pages/contact.js
import { useState } from 'react';

const ContactForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [response, setResponse] = useState('');

  // Handle input changes
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  // Handle form submission
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData),
      });

      if (res.ok) {
        const data = await res.json();
        setResponse('Success: ' + data.message);
      } else {
        throw new Error('Failed to submit form');
      }

    } catch (error) {
      setResponse('Error: ' + error.message)
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" name="name" onChange={handleChange} value={formData.name} required />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" name="email" onChange={handleChange} value={formData.email} required />
      </div>
      <button type="submit">Submit</button>

      {response && <p>{response}</p>}
    </form>
  );
};

export default ContactForm;

Explanation:

• We’ve created a simple ContactForm component that uses React Hooks (useState) to manage form state.
• The handleChange function updates the form state each time an input field changes.
• The handleSubmit function handles form submission. It prevents the default browser behavior, sends a POST request to /api/contact, and logs the response or errors.

2. Creating the API Route

Now, let's create the API route that will receive and process this form data.

// pages/api/contact.js

export default async function handler(req, res) {
  const { name, email } = req.body;

  // Validate the form data
  if (!name || !email) {
    return res.status(400).json({ message: 'Name and email are required' });
  }

  // Process the form data (e.g., saving it to a database)
  // Here, we’re simply logging it
  console.log(`Name: ${name}, Email: ${email}`);

  // Send back a response
  res.status(200).json({ message: 'Thank you for contacting us!' });
}

Explanation:

• API Route Setup: Next.js allows API routes by creating files in the pages/api directory. This file automatically becomes /api/contact.
• Handling Request: Inside the handler, req represents the HTTP request and res represents the HTTP response. Using req.body, we destructure the form data sent.
• Validation: A basic validation ensures that both the name and email fields are provided. If not, a 400 status code with an appropriate message is returned.
• Processing Data: Placeholder logic (logging here) simulates processing the form data, which could include sending emails, saving to databases, etc.
• Returning Response: Once processed, we send back a JSON response with a success message and a 200 status code.

3. Important Considerations

i. Server Side Handling

Always ensure that any sensitive operations like saving data to a database occur on the server side. Client-side operations can expose your application to security vulnerabilities.

ii. Validation

Perform proper validation both on the client and server sides to maintain data integrity. On the client side, using HTML5 required, pattern attributes and more complex logic via JavaScript can help. Server-side validation is crucial for preventing invalid or harmful inputs.

iii. Error Handling

Implement robust error handling in your API route to gracefully manage unexpected issues. Sending back descriptive error messages can also aid in debugging.

iv. Asynchronous Operations

Use asynchronous functions (like async/await) when handling API calls to keep the UI responsive and avoid blocking the main thread.

v. Content-Type Headers

Ensure the appropriate Content-Type header is set when sending data via fetch. For sending JSON, it should be 'application/json'.

vi. Security

Protect your API routes from unauthorized access by implementing proper authentication mechanisms if needed. Additionally, consider using middleware packages like next-connect to add more complex validation and security checks easily.

vii. Environment Variables

Keep configuration keys (like database connection strings) out of your source code by using environment variables. In Next.js, you can define environment variables in a .env.local file within the root of your project.

// .env.local
DATABASE_URL=your_database_connection_string_here

Then, access them via process.env.DATABASE_URL.

Example with Axios

You can replace fetch with axios for a more declarative approach. First, install axios:

npm install axios

Here’s how you might modify the handleSubmit function:

// pages/contact.js
import axios from 'axios';
import { useState } from 'react';

const ContactForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [response, setResponse] = useState('');

  // Handle input changes
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  // Handle form submission
  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const res = await axios.post('/api/contact', formData, {
        headers: {
          'Content-Type': 'application/json'
        }
      });

      if (res.status === 200) {
        setResponse('Success: ' + res.data.message);
      } else {
        throw new Error('Form submission failed');
      }

    } catch (error) {
      setResponse('Error: ' + error.message);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Name:</label>
          <input type="text" name="name" onChange={handleChange} value={formData.name} required />
        </div>
        <div>
          <label>Email:</label>
          <input type="email" name="email" onChange={handleChange} value={formData.email} required />
        </div>
        <button type="submit">Submit</button>
      </form>

      {response && <p>{response}</p>}
    </>
  );
};

export default ContactForm;

Advantages of Using Axios:

• Built-in JSON Conversion: Unlike fetch, axios will automatically convert objects to JSON without manual JSON.stringify.
• Error Handling: Easier error handling as axios throws exceptions directly for non-2xx responses.
• Interceptors and Configurations: Provides built-in support for interceptors for request and response transformations and easy global configurations.

Summary

By creating form components and corresponding API routes, you can manage data flow seamlessly within Next.js. Proper state management, validation, and error handling along with using libraries like axios can further enhance your implementation. Always remember to protect sensitive operations and configurations on the server side.