Usando APIs no Next.js 15: Guia Essencial para Iniciantes • Devpills

Introdução

O Next.js 15 não é apenas uma ferramenta para criar interfaces de usuário com React — ele também permite que você construa APIs diretamente dentro da sua aplicação. Essa funcionalidade elimina a necessidade de um backend separado para projetos simples ou de médio porte, tornando o desenvolvimento mais ágil.

Neste post, vamos explorar como criar rotas de API no Next.js 15, entender como elas funcionam e como consumi-las no frontend com exemplos práticos.

Pré-requisitos

Para acompanhar este guia, é bom ter:

Conhecimentos básicos de JavaScript
Familiaridade com React
Node.js e npm instalados
Conhecimento básico sobre requisições HTTP (GET, POST)

Criando APIs com Next.js 15

Estrutura do diretório `api/`

No Next.js 15, rotas de API são criadas dentro da pasta app/api/. Cada arquivo representa um endpoint.

app/
└── api/
    └── hello/
        └── route.ts

Exemplo: Criando a rota `GET /api/hello`

// app/api/hello/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
	return NextResponse.json({ message: 'Olá do backend Next.js!' })
}

Inicie o servidor com npm run dev e acesse: http://localhost:3000/api/hello

Consumindo a API no Frontend

Agora vamos criar uma página que consome esse endpoint usando fetch.

// app/page.tsx
'use client'
import { useEffect, useState } from 'react'

export default function Home() {
	const [mensagem, setMensagem] = useState('')

	useEffect(() => {
		fetch('/api/hello')
			.then((res) => res.json())
			.then((data) => setMensagem(data.message))
	}, [])

	return (
		<div>
			<h1>Mensagem da API:</h1>
			<p>{mensagem}</p>
		</div>
	)
}

Mini-projeto: Criando uma API de Comentários

Objetivo

Criar uma API que aceita comentários via POST e os retorna com GET.

Estrutura

app/
└── api/
    └── comentarios/
        └── route.ts

Código da API

// app/api/comentarios/route.ts
import { NextRequest, NextResponse } from 'next/server'

let comentarios: string[] = []

export async function GET() {
	return NextResponse.json({ comentarios })
}

export async function POST(request: NextRequest) {
	const { texto } = await request.json()
	comentarios.push(texto)
	return NextResponse.json({ ok: true })
}

Consumindo no Frontend

// app/page.tsx
'use client'
import { useState, useEffect } from 'react'

export default function ComentariosPage() {
	const [comentarios, setComentarios] = useState<string[]>([])
	const [novoComentario, setNovoComentario] = useState('')

	useEffect(() => {
		fetch('/api/comentarios')
			.then((res) => res.json())
			.then((data) => setComentarios(data.comentarios))
	}, [])

	const enviarComentario = async () => {
		await fetch('/api/comentarios', {
			method: 'POST',
			body: JSON.stringify({ texto: novoComentario })
		})
		setNovoComentario('')
		const res = await fetch('/api/comentarios')
		const data = await res.json()
		setComentarios(data.comentarios)
	}

	return (
		<div>
			<h1>Comentários</h1>
			<input value={novoComentario} onChange={(e) => setNovoComentario(e.target.value)} />
			<button onClick={enviarComentario}>Enviar</button>

			<ul>
				{comentarios.map((c, i) => (
					<li key={i}>{c}</li>
				))}
			</ul>
		</div>
	)
}

Próximos passos

Adicionar persistência usando banco de dados com Prisma ou Supabase
Criar autenticação com middleware e cookies
Explorar rotas dinâmicas de API
Implementar validação de dados com Zod

Materiais de Apoio

Com esse conhecimento, você já pode criar aplicações completas usando apenas Next.js! 🚀