Nextjs Api Routes And Fetching Internal Apis Complete Guide

Complete Examples, Step by Step for Beginners: Next.js API Routes and Fetching Internal APIs

1. Setting Up a Next.js Project

First, we need to set up a new Next.js project if you don't have one already. Open your terminal and run the following commands:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

2. Creating an API Route

API routes allow you to create serverless functions. You can create an API route by adding a file in the pages/api directory.

Step 2.1: Creating a Simple API Route

Let's create a simple API route that returns a list of items.

1. Create a new file named items.js inside the pages/api directory.
2. Add the following code to items.js:

// pages/api/items.js

export default function handler(req, res) {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  res.status(200).json(items);
}

3. Fetching Internal API Routes

Now that we have an API route, we need to fetch data from it in our Next.js application.

Step 3.1: Creating a Page Component to Fetch Data

1. Create a new page pages/index.js if it doesn't already exist.
2. Add the following code to index.js:

// pages/index.js

import { useEffect, useState } from 'react';

export default function Home() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/items')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setItems(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

4. Running the Application

Now that we've set up our API route and a page component to fetch and display the data, we can run the application to see our work in action.

1. Run the following command in your terminal to start the development server:

npm run dev

2. Open your web browser and navigate to http://localhost:3000/.

You should see a list of items displayed on the page.

5. Handling POST Requests in the API Route

Next, let's add functionality to handle POST requests in our API route.

Step 5.1: Extending the items.js API Route

Modify the items.js file to handle POST requests and add new items to the list.

// pages/api/items.js

let items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json(items);
  } else if (req.method === 'POST') {
    const newItem = req.body;
    newItem.id = items.length + 1;
    items.push(newItem);
    res.status(201).json(newItem);
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Step 5.2: Creating a Form to Add New Items

Update the pages/index.js file to include a form for adding new items.

// pages/index.js

import { useEffect, useState } from 'react';

export default function Home() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [itemName, setItemName] = useState('');

  useEffect(() => {
    fetch('/api/items')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setItems(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

  const handleSubmit = async (event) => {
    event.preventDefault();

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

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const newItem = await response.json();
      setItems([...items, newItem]);
      setItemName('');
    } catch (error) {
      setError(error);
    }
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={itemName}
          onChange={(event) => setItemName(event.target.value)}
          placeholder="Item name"
          required
        />
        <button type="submit">Add Item</button>
      </form>
    </div>
  );
}

6. Testing POST Functionality

1. Run the development server using the command:

npm run dev

2. Open your web browser and navigate to http://localhost:3000/.
3. Enter a new item name in the input field and click the "Add Item" button.

You should see the new item added to the list.