Full-Stack Framework

Next.js

Framework React com renderização híbrida (SSR, SSG, ISR) e API Routes integradas para aplicações production-ready.

2016Criado em

v14+Versão

MITLicença

01 — Como usamos

SSR e SSG para SEO e performance máxima

Usamos Next.js para entregar sites e aplicações com SEO perfeito e carregamento instantâneo. Com o App Router e Server Components, combinamos renderização no servidor com interatividade no cliente, eliminando JavaScript desnecessário e reduzindo o LCP drasticamente.

terminal

$ npx create-next-app@latest hoshia-app ✔ TypeScript? Yes ✔ Tailwind CSS? Yes ✔ App Router? Yes ✓ Created hoshia-app $ npm run build Route (app) Size ○ / 3.2 kB ○ /produtos 1.8 kB λ /produtos/[id] 2.1 kB ○ /blog 4.5 kB ✓ Build completed in 8.2s

02 — Na prática

API Routes e middleware sem servidor separado

Com as API Routes do Next.js, integramos backend e frontend no mesmo projeto, eliminando a necessidade de um servidor separado para operações simples. Middlewares de autenticação, rate limiting e validação rodam na edge, mais próximo do usuário.

app/api/pedidos/route.ts

1import { NextRequest, NextResponse } from 'next/server'
2import { db } from '@/lib/db'
3import { auth } from '@/lib/auth'
4
5export async function GET(req: NextRequest) {
6  const session = await auth()
7  if (!session) return NextResponse.json(
8    { error: 'Unauthorized' }, { status: 401 }
9  )
10
11  const pedidos = await db.pedido.findMany({
12    where: { userId: session.user.id },
13    orderBy: { createdAt: 'desc' }
14  })
15
16  return NextResponse.json({ pedidos })
17}

Next.js

SSR e SSG para SEO e performance máxima

API Routes e middleware sem servidor separado

Quer um projeto com Next.js?