Серверные маршруты
Nuxt включает собственный сервер — Nitro. Он отдаёт страницы, а ещё умеет отвечать на запросы к API, как отдельный бэкенд. Код для него лежит в папке server/ в корне проекта: каждый файл в server/api/ — это обработчик одного адреса.
Первый обработчик
Создайте файл server/api/posts.get.ts (папок server/ и server/api/ ещё нет — создайте и их):
// server/api/posts.get.ts
export default defineEventHandler(() => {
return [
{ id: 1, title: 'Первый пост', text: 'Привет, мир!' },
{ id: 2, title: 'Изучаем Nuxt', text: 'Страницы из файлов.' }
]
})defineEventHandler описывает обработчик запроса, а то, что функция вернула, уходит в ответ. Массив и объекты Nitro сам превращает в JSON. Откройте http://localhost:3000/api/posts — браузер покажет список статей в формате JSON.
Файл и адрес
| Файл | Метод и адрес |
|---|---|
server/api/hello.ts | Любой метод, /api/hello |
server/api/posts.get.ts | GET /api/posts |
server/api/posts.post.ts | POST /api/posts |
server/api/posts/[id].get.ts | GET /api/posts/5 |
server/api/posts/[id].delete.ts | DELETE /api/posts/5 |
server/routes/rss.xml.ts | GET /rss.xml, без приставки /api |
Метод HTTP указывают перед расширением: .get, .post, .put, .patch, .delete. Без метода обработчик отвечает на любой.
Асинхронный обработчик
Обработчик может быть асинхронным — например, ждать ответа от базы данных или чужого API:
// server/api/time.get.ts
export default defineEventHandler(async () => {
await new Promise((resolve) => setTimeout(resolve, 500))
return { now: new Date().toISOString() }
})Адрес /api/time ответит через полсекунды объектом с текущим временем.
Чем серверный код отличается
Код в app/ | Код в server/ |
|---|---|
| Выполняется на сервере и в браузере | Выполняется только на сервере |
| Виден пользователю в скачанном JavaScript | Пользователю не виден |
| Не может хранить секреты | Может обращаться к базе и хранить ключи API |
Функции сервера (defineEventHandler, getQuery, readBody и другие) тоже подключаются без импорта. А вот composables страниц (useRoute, useState) здесь недоступны: это другая среда.
Общий код сервера
Функции, нужные нескольким обработчикам, кладут в server/utils/ — они тоже импортируются автоматически, но только в серверном коде. Этим вы воспользуетесь в следующих уроках.
Частая ошибка
Положить папку server внутрь app/, рядом со страницами. Nuxt 4 ищет серверный код только в корне проекта: обработчик из app/server/api/ не заработает, и запрос к /api/posts вернёт ошибку 404. Папка server/ должна лежать рядом с app/, а не внутри неё.