blog
Deploy

Deploy Next.js na Veloz: guia completo

Tudo sobre deploy de Next.js — SSR, API Routes, Server Actions, ISR e Static Export.

hidden: true

Deploy Next.js na Veloz

Next.js é o framework mais popular entre vibecoders. Aqui está tudo que você precisa saber para deployar na Veloz.

O básico

npm install -g onveloz
veloz login
cd meu-projeto-nextjs
veloz deploy

A Veloz detecta Next.js automaticamente. Zero configuração.

App Router vs Pages Router

Ambos funcionam. A Veloz não diferencia — o Next.js cuida disso no build.

App Router (recomendado para projetos novos)

app/
├── layout.tsx
├── page.tsx
├── about/
│   └── page.tsx
└── api/
    └── users/
        └── route.ts

Pages Router

pages/
├── index.tsx
├── about.tsx
└── api/
    └── users.ts

Server Components

Funcionam nativamente. Server Components rodam no servidor da Veloz:

// app/users/page.tsx — roda no servidor
export default async function UsersPage() {
  const users = await db.user.findMany()
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
}

Server Actions

"use server";
 
export async function createUser(formData: FormData) {
  const name = formData.get("name") as string;
  await db.user.create({ data: { name } });
  revalidatePath("/users");
}

API Routes

// app/api/users/route.ts
export async function GET() {
  const users = await db.user.findMany();
  return Response.json(users);
}

Variáveis de ambiente

# Server-side (só o servidor vê)
veloz env set DATABASE_URL=postgres://...
veloz env set SECRET_KEY=abc123
 
# Client-side (browser vê — cuidado!)
veloz env set NEXT_PUBLIC_API_URL=https://api.meuapp.com

Após alterar NEXT_PUBLIC_*, faça novo deploy — são injetadas no build.

Static Export

Para sites 100% estáticos:

// next.config.js
module.exports = { output: "export" };

A Veloz detecta e serve como site estático.

Middleware

// middleware.ts
export function middleware(request) {
  if (!request.cookies.get("session")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
}
 
export const config = { matcher: ["/dashboard/:path*"] };

Funciona sem configuração extra na Veloz.

Performance

# Mais CPU e memória para apps pesados
veloz config set --cpu 1 --memory 1Gi
 
# Múltiplas instâncias
veloz config set --instances 3