Nextjs Sending And Receiving Json Complete Guide

Last Update:2025-06-22T00:00:00 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION. 9 mins read Difficulty-Level: beginner

Understanding the Core Concepts of Nextjs Sending and Receiving JSON

Next.js Sending and Receiving JSON: A Comprehensive Guide

When developing web applications with Next.js, handling JSON data is a crucial skill. Whether it's sending data to a server or receiving data from an API, proficiency with JSON operations is indispensable. This guide will walk you through how to send and receive JSON data in Next.js, equipping you with the know-how to perform these actions efficiently.

Understanding JSON

Before diving into specifics, it’s important to understand what JSON is. JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is primarily used to transmit data between a server and a web application as an alternative to XML.

Sending JSON Data

Sending JSON data in Next.js typically involves making POST requests to an API endpoint. You can achieve this using the standard Fetch API or third-party libraries like Axios or the built-in next/router for more complex routing scenarios.

1. Using the Fetch API

Here is a simple example of making a POST request using the Fetch API:

// components/SendData.js
import React from 'react';

const SendData = () => {
  const sendData = async () => {
    const data = {
      username: 'JohnDoe',
      message: 'Hello from Next.js',
    };

    try {
      const response = await fetch('/api/message', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      const result = await response.json();
      console.log('Response:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <button onClick={sendData}>Send Data</button>
  );
};

export default SendData;

In this example, a button is provided, and when clicked, the sendData function is triggered. It sends a POST request to /api/message with JSON data in the request body.

2. Using Axios

Axios is a popular library that simplifies API requests. Here’s how you can send JSON data using Axios:

// components/SendData.js
import React from 'react';
import axios from 'axios';

const SendData = () => {
  const sendData = async () => {
    const data = {
      username: 'JohnDoe',
      message: 'Hello from Next.js',
    };

    try {
      const response = await axios.post('/api/message', data);
      console.log('Response:', response.data);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <button onClick={sendData}>Send Data</button>
  );
};

export default SendData;

3. On the Server-Side with API Routes

On the server-side, you can create an API route to handle incoming POST requests and parse the JSON data:

// pages/api/message.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    // Process a POST request
    const { username, message } = req.body;
    console.log('Received:', username, message);

    res.status(200).json({ received: true });
  } else {
    // Handle any other HTTP method
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Receiving JSON Data

Receiving JSON data usually involves making GET requests to an API. Again, you can use the Fetch API or Axios to perform these requests.

1. Using the Fetch API

// components/FetchData.js
import React, { useEffect, useState } from 'react';

const FetchData = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data');
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Data Received:</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FetchData;

In this example, the useEffect hook is used to make a GET request when the component mounts. The fetched JSON data is stored in state and displayed on the UI.

2. Using Axios

// components/FetchData.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const FetchData = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data');
        setData(response.data);
      } catch (error) {
        console.error('Error:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Data Received:</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FetchData;

3. On the Server-Side with API Routes

Similarly to sending data, you can create an API route to serve JSON data:

// pages/api/data.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Simulate fetching data from a database
    const data = [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Doe' },
    ];
    res.status(200).json(data);
  } else {
    // Handle any other HTTP method
    res.setHeader('Allow', ['GET']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Important Considerations

CORS: When making requests to external APIs, be mindful of Cross-Origin Resource Sharing (CORS) policies which dictate whether a resource can be requested from another domain.
Error Handling: Always include error handling to gracefully manage network errors or server issues.
State Management: Consider using a global state management solution like Context API or Redux for managing larger state structures.
Environment Variables: Store sensitive information like API keys in environment variables, accessed via process.env.VARIABLE_NAME in Next.js.
Security: Ensure that sensitive data is properly validated and sanitized to prevent security vulnerabilities such as SQL injection and XSS attacks.

By following this guide, you should have a solid foundation for sending and receiving JSON data in Next.js. Whether your application involves simple data exchanges or complex integrations, these techniques will serve you well.

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Nextjs Sending and Receiving JSON

Step 1: Setting Up Your Next.js Project

First, you need to have node.js installed on your system (version >= 12.22.0).

Create a new Next.js project using the following command:

npx create-next-app@latest nextjs-json-example
cd nextjs-json-example

Step 2: Creating an API Route

In Next.js, API routes can be created in the pages/api folder. We'll create a simple API route that receives JSON data and sends back a response as JSON.

Create a file named users.js inside the pages/api directory:

File Path: pages/api/users.js

// pages/api/users.js

// This is an example of an API route that handles both GET and POST requests

export default function handler(req, res) {
  if (req.method === 'GET') {
    // Fetch data from your database or any external source
    const users = [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Doe' }];

    // Send the fetched data as JSON
    res.status(200).json(users);
  } else if (req.method === 'POST') {
    // Process a JSON payload in the request body
    const userData = req.body;

    // Here you would typically add this user data to your database
    console.log('Received user data:', userData);

    // Respond with a success message
    res.status(201).json({ message: 'User added successfully', receivedData: userData });
  } else {
    // Handle any other HTTP method
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Explanation:

When the API route receives a GET request, it responds with a list of dummy users.
When the API route receive a POST request, it expects JSON data in the request body, logs it, and then sends back a confirmation message along with the received JSON data.
For any other request method, it responds with a 405 Method Not Allowed status code.

Step 3: Creating a Page Component to Send Data

Let's create a simple form where a user can input their name, and upon submission, the form data will be sent to the API route as JSON.

Create a file named index.js in the pages directory (which should already exist):

File Path: pages/index.js

// pages/index.js

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function HomePage() {
  const [name, setName] = useState('');
  const router = useRouter();

  async function handleSubmit(event) {
    event.preventDefault();

    try {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name }),
      });

      if (response.ok) {
        const result = await response.json();
        alert(result.message);
        // Optionally, redirect or update the UI
        router.push('/users');
      } else {
        console.error('Error sending user data:', response.statusText);
        alert('Failed to add user!');
      }
    } catch (error) {
      console.error('Error sending user data:', error);
      alert('An unexpected error occurred.');
    }
  }

  return (
    <div>
      <h1>Add User</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
        <br /><br />
        <button type="submit">Add User</button>
      </form>
    </div>
  );
}

Explanation:

The component uses the useState hook to store the name entered by the user.
Upon form submission, the component sends a POST request to the /api/users endpoint with the user data in JSON format.
If the server responds with a successful status (201 Created), a confirmation message is displayed to the user (and optionally, they can be redirected).
If there's an error, a failure message is shown.

Step 4: Creating a Page Component to Receive Data

Now let’s create a page that fetches and displays the list of users from our API route:

Create a file named users.js in the pages directory:

File Path: pages/users.js

// pages/users.js

import { useEffect, useState } from 'react';

export default function UsersPage() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Fetching user data from our api route when the component mounts
    async function fetchUsers() {
      try {
        const response = await fetch('/api/users');
        if (response.ok) {
          const data = await response.json();
          setUsers(data);
        } else {
          console.error('Failed to fetch users:', response.statusText);
        }
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    }

    fetchUsers();
  }, []); // The empty dependency array ensures it runs only once after the initial render

  return (
    <div>
      <h1>List of Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Explanation:

The useEffect hook is used to perform side effects in the component, such as fetching data from the API.
Upon mounting the component, fetchUsers is called to retrieve the list of users from the /api/users endpoint and sets this data in the state.
Finally, the list of users is rendered on the page.

Step 5: Running the Application

To run the Next.js application, use the following command:

npm run dev

Navigate to http://localhost:3000 in your browser, fill out the form, and submit it to test adding a user via JSON. After adding the user, navigate to http://localhost:3000/users to see the list of users, which should include the one you just added.

Conclusion

This example demonstrates how to send and receive JSON data in a Next.js application using API routes. You created an API route to handle both GET and POST requests and interacted with this route from a page component using fetch.

Top 10 Interview Questions & Answers on Nextjs Sending and Receiving JSON

1. How do you send JSON data from a Next.js frontend to a backend API?

Answer: To send JSON data from a Next.js frontend to a backend API, you can use the fetch API or libraries like Axios. Here’s an example using fetch:

// Example of sending JSON data via POST request using fetch in a Next.js page or component
const handleSubmit = async (event) => {
  event.preventDefault();
  const data = {
    name: 'John Doe',
    email: 'john.doe@example.com',
  };

  try {
    const response = await fetch('/api/submit', {
      method: 'POST', // Specify method
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data), // Convert data to JSON
    });

    const result = await response.json(); // Get JSON response
    console.log(result);
  } catch (error) {
    console.error('Error sending data:', error);
  }
};

2. How can you receive JSON data in a Next.js API route?

Answer: In a Next.js API route, you can receive JSON data from an incoming request by parsing the request.body. Here’s how you can do it:

// File: pages/api/receive.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    // Parse JSON data
    const data = req.body;
    console.log('Received data:', data);

    // Respond with some JSON
    res.status(200).json({ message: 'Data received successfully!' });
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Ensure your middleware correctly parses JSON, which is usually done automatically by Next.js.

3. How can you handle errors when sending data in Next.js?

Answer: Handling errors when sending data involves checking the response status and handling exceptions. Here’s an improved version of the previous example with error handling:

// Error handling in the fetch call
const handleSubmit = async (event) => {
  event.preventDefault();
  const data = {
    name: 'John Doe',
    email: 'john.doe@example.com',
  };

  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    // Check if the response is okay
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const result = await response.json();
    console.log('Success:', result);
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
};

4. How do you set up a CORS policy in Next.js API routes?

Answer: CORS (Cross-Origin Resource Sharing) can be handled in Next.js API routes by setting headers manually or using a package like nextjs-cors.

Manual Setup:

// File: pages/api/receive.js
export default function handler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');

  if (req.method === 'OPTIONS') {
    return res.status(200).end();
  }

  if (req.method === 'POST') {
    const data = req.body;
    res.status(200).json({ message: 'CORS enabled successfully!', data: data });
  } else {
    res.setHeader('Allow', ['POST', 'GET', 'OPTIONS']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Using nextjs-cors:

# Install nextjs-cors package
npm install nextjs-cors

// File: pages/api/receive.js
import Cors from 'nextjs-cors';

export default async function handler(req, res) {
  // Run CORS middleware
  await Cors(req, res, {
    methods: ['POST', 'GET', 'HEAD', 'OPTIONS'],
  });

  if (req.method === 'POST') {
    const data = req.body;
    res.status(200).json({ message: 'CORs enabled successfully!', data: data });
  } else {
    res.setHeader('Allow', ['POST', 'GET', 'HEAD', 'OPTIONS']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

5. Can you use Axios instead of `fetch` in Next.js for sending HTTP requests?

Answer: Yes, Axios is a popular library that simplifies making HTTP requests. First, install Axios using npm:

# Install axios package
npm install axios

Then, you can use it as follows:

// Example using Axios
import axios from 'axios';
import React from 'react';

const handleSubmit = async () => {
  const data = { username: 'johndoe', email: 'email@example.com' };
  try {
    const response = await axios.post('/api/submit', data, {
      headers: {
        'Content-Type': 'application/json',
      },
    });

    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

const MyComponent = ({}) => {
  return (
    <button onClick={handleSubmit}>
      Submit Data Using Axios
    </button>
  );
};

export default MyComponent;

6. How do you validate JSON data before processing it in a Next.js API route?

Answer: Validating JSON data can be done using libraries like Joi or custom validation logic. Here’s an example using Joi:

// File: pages/api/validate.js
import Joi from 'joi';

const schema = Joi.object().keys({
  username: Joi.string().alphanum().min(3).max(30).required(),
  password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{8,20}$')).required(),
  email: Joi.string().email().required(),
});

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { error } = schema.validate(req.body);

    if (error) {
      return res.status(400).json({ error: error.details[0].message });
    } else {
      res.status(200).json({ message: 'Validation successful!' });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

7. What is JSON serialization/deserialization in Next.js?

Answer: JSON serialization is converting JavaScript objects into JSON strings to send over a network, while deserialization is converting received JSON strings back into JavaScript objects. In Next.js, JSON.stringify() is used for serialization and JSON.parse() for deserialization.

Here's a simple example:

// Serialization
const userData = { name: 'John', age: 25 };
const jsonData = JSON.stringify(userData);
console.log(jsonData); // Output: {"name":"John","age":25}

// Deserialization
const receivedJsonData = '{"name":"John","age":25}';
const userObj = JSON.parse(receivedJsonData);
console.log(userObj); // Output: { name: 'John', age: 25 }

8. How can you send JSON data to another server in a Next.js API route?

Answer: To send JSON data to another server from a Next.js API route, you again use the fetch API or a library like Axios.

Example sending to an external server using fetch:

// File: pages/api/sendExternal.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const externalResponse = await fetch('https://external-api.com/data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(req.body),
      });

      const externalData = await externalResponse.json();
      res.status(200).json(externalData);
    } catch (error) {
      console.error(error);
      res.status(500).json({ error: 'Failed to send data to external service' });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

9. How do you ensure the security of JSON data transmission in Next.js?

Answer: To secure JSON data transmission in Next.js, ensure the following:

Use HTTPS: Always use HTTPS to encrypt data in transit.
Validate Inputs: Sanitize and validate all inputs on both client and server sides.
Rate Limiting: Use rate limiting to prevent abuse of API endpoints.
Authentication & Authorization: Implement proper authentication mechanisms (JWT, OAuth, etc.) to verify users.
Environment Variables: Store sensitive information like API keys in environment variables.
CSRF Protection: Protect against CSRF attacks by validating requests.

10. What are the best practices for managing API responses in Next.js?

Answer: Best practices for managing API responses in Next.js include:

Use Proper Status Codes: Return appropriate HTTP status codes to indicate the success or failure of operations.
Error Handling: Implement comprehensive error-handling strategies, including logging and detailed error messages.
Pagination: For APIs returning lists, implement pagination to avoid large data payloads.
Caching: Use caching techniques (e.g., getStaticProps, getServerSideProps) to reduce the number of calls made to external APIs.
Documentation: Ensure that your API documentation is clear and up-to-date so developers know what to expect.
Consistent Data Structure: Always structure your API responses consistently and provide metadata where necessary.

Nextjs Sending And Receiving Json Complete Guide

Next.js Sending and Receiving JSON: A Comprehensive Guide

Understanding JSON

Sending JSON Data

Receiving JSON Data

Important Considerations

Online Code run

Step 1: Setting Up Your Next.js Project

Step 2: Creating an API Route

Step 3: Creating a Page Component to Send Data

Step 4: Creating a Page Component to Receive Data

Step 5: Running the Application

Conclusion

1. How do you send JSON data from a Next.js frontend to a backend API?

2. How can you receive JSON data in a Next.js API route?

3. How can you handle errors when sending data in Next.js?

4. How do you set up a CORS policy in Next.js API routes?

5. Can you use Axios instead of fetch in Next.js for sending HTTP requests?

6. How do you validate JSON data before processing it in a Next.js API route?

7. What is JSON serialization/deserialization in Next.js?

8. How can you send JSON data to another server in a Next.js API route?

9. How do you ensure the security of JSON data transmission in Next.js?

10. What are the best practices for managing API responses in Next.js?

You May Like This Related .NET Topic

5. Can you use Axios instead of `fetch` in Next.js for sending HTTP requests?