One of the most powerful features of Next.js is its ability to handle backend logic directly within your frontend application. With API Routes, you can create server-side endpoints as part of your project—no need to set up a separate backend service.

Whether you need to fetch data, handle forms, authenticate users, or integrate third-party services, Next.js API Routes let you write server-side code using the same stack and tools you're already using on the frontend.

What Are API Routes?

API Routes in Next.js allow you to define server-side functions that run in a Node.js environment. These functions are deployed as serverless functions when you host your app (e.g., on Vercel).

They are placed inside the /pages/api directory and are automatically mapped to the corresponding route.

Example:

pages/api/hello.js → /api/hello

Creating Your First API Route

Let's create a simple API endpoint that returns a greeting message.

Create a file at pages/api/hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });

}

Now, navigate to http://localhost:3000/api/hello in your browser. You should see a JSON response:

{ "message": "Hello from Next.js API!" }

Request Methods and Routing

Each API route can handle different HTTP methods such as GET, POST, PUT, and DELETE. Use conditional logic inside your handler function to respond accordingly.

export default function handler(req, res) {
  if (req.method === 'GET') {
  res.status(200).json({ message: 'This is a GET request' });

  } else if (req.method === 'POST') {
  res.status(200).json({ message: 'This is a POST request' });

  } else {
  res.setHeader('Allow', ['GET', 'POST']);

  res.status(405).end(`Method ${req.method} Not Allowed`);

  }
}

Parsing Request Data

For POST or PUT requests, you often need to access data sent in the request body. By default, Next.js automatically parses JSON request bodies for you.

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

  res.status(200).json({ message: `Hello, ${name}` });

}

To test this, you can send a POST request using a tool like Postman or with fetch in your app:

fetch('/api/hello', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' }),
});

Using Query Parameters

You can also handle URL query parameters with req.query:

// pages/api/greet.js
export default function handler(req, res) {
  const { name } = req.query;

  res.status(200).json({ greeting: `Hello, ${name || 'Guest'}` });

}

Access it by visiting /api/greet?name=Sarah.

Creating Dynamic API Routes

API routes can be dynamic by using square brackets in filenames. For example:

// pages/api/user/[id].js
export default function handler(req, res) {
  const { id } = req.query;

  res.status(200).json({ userId: id });

}

Now you can hit /api/user/123 and receive a dynamic response:

{ "userId": "123" }

Error Handling

It's important to return proper HTTP status codes and messages for errors:

export default function handler(req, res) {
  try {
  throw new Error('Something went wrong!');

  } catch (error) {
  res.status(500).json({ error: error.message });

  }
}

Working with External APIs

You can use API routes as a proxy for third-party services. For example, calling an external weather API:

export default async function handler(req, res) {
  const response = await fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_KEY&q=London');

  const data = await response.json();

  res.status(200).json(data);

}

When to Use API Routes

Use API Routes in Next.js when:

You need backend functionality without a separate server
You want to connect to a database or external service
You need server-side form handling or authentication
You want to keep logic private (e.g., API keys, tokens)

Limitations of API Routes

While powerful, API Routes are not a full backend framework. Consider these limitations:

They are serverless functions (on Vercel), meaning cold starts and timeouts can occur
No built-in session management or long-lived connections
Stateful operations (like websockets or persistent storage) require external solutions

Conclusion

Next.js API Routes offer a fast and seamless way to build server-side functionality within your frontend app. You can create custom endpoints, interact with databases, perform authentication, or fetch external data—all using familiar JavaScript/TypeScript syntax and tools.

This eliminates the need for an additional Express or Node.js backend and simplifies your project architecture. Whether you're building a simple form handler or a proxy to a third-party API, API Routes in Next.js are a powerful tool in your development toolkit.

As your project grows, you can easily refactor your API logic into reusable functions, integrate with middleware, or even connect to full-fledged backend platforms like Supabase or Prisma.

Happy coding—and enjoy the power of full-stack development with Next.js!

Api Blogs

Next.js API Routes: Building Server Endpoints