Next.js стал одной из самых популярных платформ для создания надежных и производительных веб-приложений. Одной из его самых мощных функций является возможность создавать маршруты API, которые позволяют вам создавать серверные функции непосредственно в вашем приложении Next.js. Благодаря дополнительным преимуществам TypeScript вы можете обеспечить безопасность типов и выявить ошибки на ранних этапах процесса разработки. В этой статье мы рассмотрим различные методы и приемы создания маршрутов API Next.js с использованием TypeScript.

1. Обработка запросов GET:

Чтобы обрабатывать запрос GET в маршруте API Next.js, вы можете определить функцию, которая принимает параметры req(запрос) и res(ответ). Вот пример:

import { NextApiRequest, NextApiResponse } from 'next';
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  // Handle the GET request
  res.status(200).json({ message: 'Hello, World!' });
}

1. Обработка POST-запросов:

Аналогично вы можете обработать POST-запрос, отметив req.methodи выполнив необходимые действия. Вот пример:

import { NextApiRequest, NextApiResponse } from 'next';
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const data = req.body; // Access the request body
    // Process the data
    res.status(200).json({ message: 'Data received successfully!' });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

1. Обработка параметров запроса:

Маршруты API Next.js также позволяют обрабатывать параметры запроса, отправленные вместе с запросом. Доступ к этим параметрам можно получить с помощью объекта req.query. Вот пример:

import { NextApiRequest, NextApiResponse } from 'next';
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const { id } = req.query; // Access the query parameter "id"
  // Fetch data based on the provided ID
  res.status(200).json({ id, data: 'Some data' });
}

1. Обработка динамических маршрутов:

Маршруты API Next.js могут обрабатывать динамические маршруты, что позволяет создавать конечные точки, соответствующие определенным шаблонам. Вы можете определить динамический маршрут, поместив параметр в квадратные скобки []. Вот пример:

import { NextApiRequest, NextApiResponse } from 'next';
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const { slug } = req.query; // Access the dynamic parameter "slug"
  // Fetch data based on the provided slug
  res.status(200).json({ slug, data: 'Some data' });
}

1. Промежуточное ПО и аутентификация:

Маршруты API Next.js также могут использовать функции промежуточного программного обеспечения для выполнения таких задач, как аутентификация, проверка, ведение журнала и т. д. Для этой цели вы можете создавать собственные функции промежуточного программного обеспечения или использовать существующие библиотеки, такие как next-connect. Вот пример:

import { NextApiRequest, NextApiResponse } from 'next';
import nc from 'next-connect';
const middleware = (req: NextApiRequest, res: NextApiResponse, next: () => void) => {
  // Perform middleware actions
  next();
};
const handler = nc<NextApiRequest, NextApiResponse>()
  .use(middleware)
  .get((req, res) => {
    // Handle GET request
    res.status(200).json({ message: 'Hello, World!' });
  })
  .post((req, res) => {
    // Handle POST request
    res.status(200).json({ message: 'Data received successfully!' });
  });
export default handler;

Маршруты API Next.js предоставляют мощный способ создания серверной функциональности в ваших приложениях Next.js. Объединив возможности Next.js с безопасностью типов TypeScript, вы можете создавать надежные и удобные в обслуживании API. В этой статье мы рассмотрели различные методы обработки запросов GET и POST, работу с параметрами запроса и динамическими маршрутами, а также реализацию промежуточного программного обеспечения для аутентификации и других задач. Благодаря этим методам в вашем наборе инструментов вы будете хорошо подготовлены к созданию масштабируемых и эффективных API с помощью Next.js и TypeScript.