API routes vs server actions decision in NextJS - Hands-On Comparison

Choosing Between API Routes and Server Actions in Next.js

📖 Scenario: You are building a simple Next.js app that lets users submit feedback. You want to decide whether to use API routes or server actions to handle the feedback submission.

🎯 Goal: Build a Next.js component that collects user feedback and sends it to the server using either an API route or a server action. Learn how to set up both methods and understand when to use each.

📋 What You'll Learn

Create a feedback form component with a textarea and submit button

Set up an API route to receive feedback data

Create a server action to handle feedback submission

Implement the feedback submission using both API route and server action methods

💡 Why This Matters

🌍 Real World

Feedback forms are common in websites and apps to collect user opinions or bug reports. Knowing how to handle form submissions with API routes or server actions helps build efficient and modern Next.js applications.

💼 Career

Understanding API routes and server actions is essential for Next.js developers. It helps in building scalable backend logic and choosing the right approach for server communication.

1

Create the feedback form component

Create a React functional component called FeedbackForm with a textarea for user feedback and a button to submit. Use useState to store the feedback text in a variable called feedback.

NextJS

import React, { useState } from 'react';

function FeedbackForm() {
  // Your code here
}

Need a hint?

Use useState to create feedback and setFeedback. Add a textarea with value and onChange to update the state.

2

Set up an API route to receive feedback

Create a new API route file at app/api/feedback/route.js. Export an async function called POST that accepts a request parameter. Inside, parse the JSON body to get feedback and return a JSON response with { message: 'Feedback received' }.

NextJS

export async function POST(request) {
  // Your code here
}

Need a hint?

Use await request.json() to get the data. Extract feedback from it. Return a JSON response with a success message.

3

Add server action to handle feedback submission

In the FeedbackForm component, create an async function called handleSubmit that takes an event parameter. Prevent default form submission. Use the Fetch API to POST the feedback state to /api/feedback as JSON. Attach handleSubmit to the form's onSubmit event.

NextJS

import React, { useState } from 'react';

function FeedbackForm() {
  const [feedback, setFeedback] = useState('');

  async function handleSubmit(event) {
    // Your code here
  }

  return (
    
       setFeedback(e.target.value)}
        aria-label="Feedback text area"
        rows={4}
        cols={50}
      />
      Submit Feedback
    
  );
}

export default FeedbackForm;

Need a hint?

Prevent the default form action. Use fetch to send a POST request with JSON containing feedback. Attach handleSubmit to the form.

4

Implement server action for feedback submission

Create a server action function called submitFeedback in the FeedbackForm component. It should accept a FormData parameter, extract the feedback field, and simulate saving it by returning a success message string. Update the form to use action={submitFeedback} and change the textarea to have a name attribute of feedback. Remove the handleSubmit function and onSubmit handler.

NextJS

import React, { useState } from 'react';

function FeedbackForm() {
  // Your code here

  return (
    
      
      Submit Feedback
    
  );
}

export default FeedbackForm;

export async function submitFeedback(formData) {
  // Your code here
}

Need a hint?

Define submitFeedback to get feedback from formData and return a success string. Use action={submitFeedback} on the form and add name="feedback" to the textarea. Remove previous submit handler.