Pontos-chave
- Base de código unificada: as rotas da API do Next.js permitem-te criar e gerir pontos de extremidade do backend diretamente no teu projeto frontend.
- Métodos padrão: Os endpoints gerem os dados ao associar métodos HTTP padrão (GET, POST, PUT, DELETE) a ações específicas do backend.
- Fiabilidade da API: Independentemente da base de dados ou das ferramentas específicas utilizadas, um ponto de acesso seguro requer uma validação rigorosa dos dados introduzidos e um tratamento adequado dos erros.
Os endpoints REST são usados pelas aplicações para ligar o front-end ao back-end. Seja qual for a aplicação web que usares, por exemplo, a Amazon, onde carregas dados, preenches um formulário ou atualizas itens no teu carrinho de compras, todas as ações acontecem através de uma API.
Instalar o Node.js
C:\Users\abdulrehman\Downloads\node-v24.15.0-win-x64\node-v24.15.0-win-x64
Abrir a pasta do projeto no Prompt de Comandos
cd C:\Users\abdulrehman\Desktop\tasks-api
Configurar o Prompt de Comando para o executável do Node
set PATH=%PATH%;C:\Users\abdulrehman\Downloads\node-v24.15.0-win-x64\node-v24.15.0-win-x64
node -v npm -v
Criar o projeto Next.js
npx create-next-app@latest .
Executar o projeto
npm run dev
Instalar o Prisma
npm install prisma@^6 --save-dev
npm install @prisma/client@^6
A inicializar o Prisma
npx prisma init --datasource-provider sqlite
Verificar os ficheiros gerados
DATABASE_URL="file:./dev.db"
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
Adicionar o modelo «Tarefa»
model Task {
id Int @id @default(autoincrement())
title String
description String?
completed Boolean @default(false)
createdAt DateTime @default(now())
}
Executar a primeira migração
npx prisma migrate dev --name init
Configurar o cliente Prisma
import { PrismaClient } from "@prisma/client";
const globalForPrisma = global as unknown as { prisma: PrismaClient };
export const prisma = globalForPrisma.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
Criar o ficheiro de percurso
app/api/tasks/route.ts
O ponto de extremidade GET
import { NextResponse } from "next/server";
import { prisma } from "@/app/lib/prisma";
export async function GET() {
const tasks = await prisma.task.findMany();
return NextResponse.json(tasks);
}
O Endpoint POST
export async function POST(request: Request) {
const body = await request.json();
const task = await prisma.task.create({
data: {
title: body.title,
description: body.description,
},
});
return NextResponse.json(task, { status: 201 });
}
Testar os pontos finais
npm run dev
GET /api/tasks
[]
POST /api/tasks
{
"title": "Write the tutorial",
"description": "Finish the Next.js API routes guide"
}
{
"id": 1,
"title": "Write the tutorial",
"description": "Finish the Next.js API routes guide",
"completed": false,
"createdAt": "2026-05-12T10:32:14.000Z"
}
[
{
"id": 1,
"title": "Write the tutorial",
"description": "Finish the Next.js API routes guide",
"completed": false,
"createdAt": "2026-05-12T10:32:14.000Z"
}
]
Criar o ficheiro de rotas dinâmicas
app/api/tasks/[id]/route.ts
O ponto de acesso GET por ID
import { NextResponse } from "next/server";
import { prisma } from "@/app/lib/prisma";
export async function GET(
request: Request,
{ params }: { params: Promise<{ id: string }> }
) {
const { id } = await params;
const task = await prisma.task.findUnique({
where: { id: Number(id) },
});
if (!task) {
return NextResponse.json({ error: "Task not found" }, { status: 404 });
}
return NextResponse.json(task);
}
O Endpoint PUT
export async function PUT(
request: Request,
{ params }: { params: Promise<{ id: string }> }
) {
const { id } = await params;
const body = await request.json();
const task = await prisma.task.update({
where: { id: Number(id) },
data: {
title: body.title,
description: body.description,
completed: body.completed,
},
});
return NextResponse.json(task);
}
O Endpoint DELETE
export async function DELETE(
request: Request,
{ params }: { params: Promise<{ id: string }> }
) {
const { id } = await params;
await prisma.task.delete({
where: { id: Number(id) },
});
return NextResponse.json({ message: "Task deleted" });
}
GET /api/tasks/1
{
"id": 1,
"title": "Write the tutorial",
"description": "Finish the Next.js API routes guide",
"completed": false,
"createdAt": "2026-05-12T10:32:14.000Z"
}
PUT /api/tasks/1
{
"title": "Write the tutorial",
"description": "Finish the Next.js API routes guide",
"completed": true
}
{
"id": 1,
"title": "Write the tutorial",
"description": "Finish the Next.js API routes guide",
"completed": true,
"createdAt": "2026-05-12T10:32:14.000Z"
}
DELETE /api/tasks/1
{
"message": "Task deleted"
}
Instalar o Zod
npm install zod
Criar um esquema de validação
import { z } from "zod";
export const taskSchema = z.object({
title: z.string().min(1, "Title is required"),
description: z.string().optional(),
completed: z.boolean().optional(),
});
Incorporar a validação
import { taskSchema } from "@/app/lib/validations";
export async function POST(request: Request) {
const body = await request.json();
const result = taskSchema.safeParse(body);
if (!result.success) {
return NextResponse.json(
{ error: result.error.issues },
{ status: 400 }
);
}
const task = await prisma.task.create({
data: result.data,
});
return NextResponse.json(task, { status: 201 });
}
export async function PUT(
request: Request,
{ params }: { params: Promise<{ id: string }> }
) {
const { id } = await params;
const body = await request.json();
const result = taskSchema.safeParse(body);
if (!result.success) {
return NextResponse.json(
{ error: result.error.issues },
{ status: 400 }
);
}
const task = await prisma.task.update({
where: { id: Number(id) },
data: result.data,
});
return NextResponse.json(task);
}
Testar a validação
{
"title": "",
"description": "Trying to break the API"
}
P1: O que são as rotas API no Next.js?
As rotas da API permitem criar pontos de extremidade do backend dentro de projetos Next.js.
P2: O Next.js trata do encaminhamento?
Sim. O Next.js tem o seu próprio sistema de encaminhamento.
P3: Que métodos HTTP são suportados nas rotas do Next.js?
No ficheiro de rotas, podes ter manipuladores para métodos HTTP comuns.
P4: Qual é a diferença entre as rotas da API e as ações do servidor?
As rotas da API são pontos de extremidade do backend que podem ser chamados a partir de qualquer lugar.
Share your opinion in the comment section.
COMMENT NOW
Abdul Rehman
O Abdul é um profissional de marketing experiente em tecnologia, movido a café e criativo, que adora manter-se a par das últimas actualizações de software e gadgets tecnológicos. É também um escritor técnico competente que consegue explicar conceitos complexos de forma simples para um público alargado. Abdul gosta de partilhar os seus conhecimentos sobre a indústria da nuvem através de manuais de utilizador, documentação e publicações em blogues.
Get Connected on:
Twitter
