Building a Real-World Project with Next.js API Routes

In the rapidly evolving landscape of web development, Next.js has emerged as a frontrunner, not just for its exceptional frontend capabilities but also for its integrated backend solutions. Specifically, Next.js API Routes empower developers to create serverless functions directly within their Next.js projects, blurring the lines between frontend and backend development. This next.js api routes project tutorial will guide you through building a practical, real-world application, demonstrating the true potential of this feature.

Why Next.js API Routes for Your Real-World Project?

Next.js API Routes are essentially serverless functions that live within your pages/api directory. Each file in this directory becomes an API endpoint, allowing you to handle HTTP requests (GET, POST, PUT, DELETE, etc.) directly. Here’s why they are a game-changer for real world next.js applications:

• Unified Codebase: Keep your frontend and backend logic in one repository, simplifying development and maintenance.
• Serverless by Design: They deploy as serverless functions, scaling automatically and costing only for execution time.
• Zero Configuration: Next.js handles routing and bundling, letting you focus on your business logic.
• Seamless Integration: Access environment variables, use Node.js modules, and connect to databases effortlessly.

Our Real-World Project: A Simple Feedback API

To illustrate the power of build with next.js api routes, we’ll create a simple feedback submission API. Users will submit feedback from a frontend form, and our Next.js API route will receive, store, and allow retrieval of this data. This is a classic example of a next.js api routes project tutorial that provides immediate value.

Step 1: Setting Up Your Next.js Project

First, let’s bootstrap a new Next.js application:

npx create-next-app@latest my-feedback-app --ts
cd my-feedback-app

We’re using TypeScript for better type safety, a practice we often advocate for, similar to how we explored type safety in A Step-by-Step Guide to TypeScript Generics Integration.

Step 2: Understanding API Routes Structure

Next.js automatically maps files in the pages/api directory to API routes. For example, pages/api/hello.ts becomes the /api/hello endpoint. Let’s look at the default hello endpoint:

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  name: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' });
}

Step 3: Building Our Feedback API Endpoint

Now, let’s create our custom API route to handle feedback submissions. We’ll create pages/api/feedback.ts.

Handling POST Requests (Submission)

Our API needs to accept POST requests containing feedback data. For demonstration, we’ll store this data in a simple JSON file. In a production environment, you’d connect to a database like MongoDB, PostgreSQL, or a NoSQL solution. This backend logic is akin to setting up a microservice for a specific task, much like the concepts discussed in our article on Automating Workflows with Node.js Microservices: A Quick Tutorial.

First, create a file named data/feedback.json at the root of your project (or in a lib folder) with an empty array:

// data/feedback.json
[]

Now, update pages/api/feedback.ts:

// pages/api/feedback.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import fs from 'fs';
import path from 'path';

interface FeedbackItem {
  id: string;
  email: string;
  text: string;
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<FeedbackItem[] | { message: string } | { feedback: FeedbackItem }>
) {
  const filePath = path.join(process.cwd(), 'data', 'feedback.json');
  const fileData = fs.readFileSync(filePath, 'utf8');
  const data: FeedbackItem[] = JSON.parse(fileData);

  if (req.method === 'POST') {
    const { email, text } = req.body;

    if (!email || !text) {
      return res.status(400).json({ message: 'Email and text are required.' });
    }

    const newFeedback: FeedbackItem = {
      id: new Date().toISOString(), // Simple unique ID
      email,
      text,
    };

    data.push(newFeedback);
    fs.writeFileSync(filePath, JSON.stringify(data, null, 2)); // Pretty print JSON

    res.status(201).json({ feedback: newFeedback });
  } else if (req.method === 'GET') {
    res.status(200).json(data);
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).json({ message: `Method ${req.method} Not Allowed` });
  }
}

Handling GET Requests (Retrieval)

As you can see in the code above, we’ve already added logic for GET requests. When a GET request is made to /api/feedback, it will read and return all stored feedback items. This demonstrates how a single API route can handle multiple HTTP methods, making it versatile for your next.js api routes project tutorial.

Step 4: Integrating with the Frontend

Now that our API is ready, let’s create a simple form on the frontend to interact with it. Modify pages/index.tsx:

// pages/index.tsx
import { useState, FormEvent } from 'react';

interface FeedbackItem {
  id: string;
  email: string;
  text: string;
}

export default function HomePage() {
  const [email, setEmail] = useState('');
  const [feedbackText, setFeedbackText] = useState('');
  const [feedbackList, setFeedbackList] = useState<FeedbackItem[]>([]);
  const [message, setMessage] = useState('');

  async function submitFeedbackHandler(event: FormEvent) {
    event.preventDefault();

    try {
      const response = await fetch('/api/feedback', {
        method: 'POST',
        body: JSON.stringify({ email, text: feedbackText }),
        headers: {
          'Content-Type': 'application/json',
        },
      });
      const data = await response.json();
      if (!response.ok) {
        throw new Error(data.message || 'Something went wrong!');
      }
      setMessage('Feedback submitted successfully!');
      setEmail('');
      setFeedbackText('');
      fetchFeedbackHandler(); // Refresh feedback list
    } catch (error: any) {
      setMessage(`Error: ${error.message}`);
    }
  }

  async function fetchFeedbackHandler() {
    try {
      const response = await fetch('/api/feedback');
      const data: FeedbackItem[] = await response.json();
      if (!response.ok) {
        throw new Error('Failed to fetch feedback!');
      }
      setFeedbackList(data);
    } catch (error: any) {
      setMessage(`Error fetching feedback: ${error.message}`);
    }
  }

  return (
    <div style={{ maxWidth: '800px', margin: '50px auto', padding: '20px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)' }}>
      <h1 style={{ color: '#2c3e50', textAlign: 'center', marginBottom: '30px' }}>Feedback Form</h1>
      <form onSubmit={submitFeedbackHandler} style={{ display: 'flex', flexDirection: 'column', gap: '15px', marginBottom: '30px' }}>
        <div>
          <label htmlFor="email" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>Your Email</label>
          <input
            type="email"
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box' }}
          />
        </div>
        <div>
          <label htmlFor="feedback" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>Your Feedback</label>
          <textarea
            id="feedback"
            rows={5}
            value={feedbackText}
            onChange={(e) => setFeedbackText(e.target.value)}
            required
            style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box' }}
          ></textarea>
        </div>
        <button type="submit" style={{ padding: '12px 20px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '1.1em', transition: 'background-color 0.3s ease' }}>Send Feedback</button>
      </form>

      {message && <p style={{ padding: '10px', backgroundColor: message.startsWith('Error') ? '#f8d7da' : '#d4edda', color: message.startsWith('Error') ? '#721c24' : '#155724', border: message.startsWith('Error') ? '1px solid #f5c6cb' : '1px solid #c3e6cb', borderRadius: '4px', marginBottom: '20px' }}>{message}</p>}

      <hr style={{ margin: '40px 0', borderColor: '#eee' }} />

      <h2 style={{ color: '#2c3e50', textAlign: 'center', marginBottom: '30px' }}>All Feedback</h2>
      <button onClick={fetchFeedbackHandler} style={{ padding: '10px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '1em', transition: 'background-color 0.3s ease', marginBottom: '20px' }}>Load Feedback</button>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {feedbackList.map((item) => (
          <li key={item.id} style={{ backgroundColor: '#f9f9f9', border: '1px solid #eee', padding: '15px', marginBottom: '10px', borderRadius: '6px' }}>
            <p style={{ margin: '0 0 5px 0', fontWeight: 'bold', color: '#333' }}>Email: <span style={{ fontWeight: 'normal' }}>{item.email}</span></p>
            <p style={{ margin: '0', color: '#555' }}>Feedback: <span style={{ fontStyle: 'italic' }}>{item.text}</span></p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Deployment Considerations

One of the greatest advantages of using Next.js API Routes is their seamless deployment. Platforms like Vercel (the creators of Next.js) automatically detect API routes and deploy them as serverless functions. This means your real world next.js application can scale effortlessly without complex server configurations.

Conclusion: Unleash Your Full-Stack Potential

You’ve just completed a comprehensive next.js api routes project tutorial, demonstrating how to build with next.js api routes for a practical application. From setting up endpoints to handling data and integrating with the frontend, Next.js provides an elegant and efficient way to develop full-stack applications. Embrace this powerful feature to streamline your development workflow and create robust, scalable web experiences.

Frequently Asked Questions (FAQ)