Skip to content

Commit fa4c065

Browse files
Changed early return order to better execution on handleSingleString function
1 parent 1d91bb2 commit fa4c065

File tree

3 files changed

+602
-4
lines changed

3 files changed

+602
-4
lines changed

docs/examples/README.md

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
# Integração do Client VBase no Middleware do Next.js
2+
3+
Este guia explica como integrar o client VBase do `@vtex/api` no middleware do Next.js.
4+
5+
## 📋 Pré-requisitos
6+
7+
1. **Projeto Next.js** (versão 12.2 ou superior para suporte ao middleware)
8+
9+
2. **Instalação de dependências:**
10+
```bash
11+
npm install @vtex/api uuid
12+
# ou
13+
yarn add @vtex/api uuid
14+
```
15+
16+
3. **Variáveis de ambiente** (crie um arquivo `.env.local`):
17+
```env
18+
# Obrigatório
19+
VTEX_ACCOUNT=seu-account-name
20+
VTEX_AUTH_TOKEN=seu-token-de-autenticacao
21+
VTEX_APP_ID=vendor.app-name@major-version
22+
23+
# Opcionais
24+
VTEX_WORKSPACE=master
25+
VTEX_REGION=aws-us-east-1
26+
```
27+
28+
> **Importante:** O `VTEX_APP_ID` é obrigatório para o client VBase funcionar. Ele deve seguir o formato `vendor.app-name@major-version` (ex: `[email protected]`).
29+
30+
## 🚀 Como usar
31+
32+
### Passo 1: Copiar as funções helper
33+
34+
Copie as funções `createVBaseContext` e `createVBaseClient` do arquivo de exemplo para seu projeto, ou crie um arquivo separado (ex: `lib/vtex/vbase-helpers.ts`).
35+
36+
### Passo 2: Criar o middleware
37+
38+
Crie um arquivo `middleware.ts` na raiz do seu projeto Next.js:
39+
40+
```typescript
41+
import { NextRequest, NextResponse } from 'next/server'
42+
import { createVBaseContext, createVBaseClient } from './lib/vtex/vbase-helpers'
43+
44+
export async function middleware(request: NextRequest) {
45+
// Extrair account e workspace
46+
const account =
47+
request.headers.get('x-vtex-account') ||
48+
process.env.VTEX_ACCOUNT || ''
49+
50+
const workspace =
51+
request.headers.get('x-vtex-workspace') ||
52+
process.env.VTEX_WORKSPACE || 'master'
53+
54+
if (!account) {
55+
return NextResponse.next()
56+
}
57+
58+
try {
59+
// Criar contexto e client VBase
60+
const context = createVBaseContext(request, {
61+
account,
62+
workspace,
63+
authToken: request.headers.get('x-vtex-credential') || process.env.VTEX_AUTH_TOKEN,
64+
})
65+
66+
const vbase = createVBaseClient(context)
67+
68+
// Usar o client VBase
69+
const bucket = 'meu-bucket'
70+
const filePath = 'arquivo.json'
71+
const data = await vbase.getJSON(bucket, filePath, true)
72+
73+
// Modificar resposta com dados do VBase
74+
const response = NextResponse.next()
75+
if (data) {
76+
response.headers.set('x-vbase-data', JSON.stringify(data))
77+
}
78+
79+
return response
80+
} catch (error) {
81+
console.error('Erro no middleware VBase:', error)
82+
return NextResponse.next()
83+
}
84+
}
85+
86+
export const config = {
87+
matcher: [
88+
'/((?!api|_next/static|_next/image|favicon.ico).*)',
89+
],
90+
}
91+
```
92+
93+
## 📝 Exemplos de uso
94+
95+
### 1. Buscar configurações do VBase
96+
97+
```typescript
98+
const config = await vbase.getJSON<{ theme: string; features: string[] }>(
99+
'app-config',
100+
'settings.json',
101+
true // retorna null se não encontrar
102+
)
103+
```
104+
105+
### 2. Listar arquivos de um bucket
106+
107+
```typescript
108+
const files = await vbase.listFiles('app-assets', {
109+
prefix: 'images/',
110+
limit: 100
111+
})
112+
```
113+
114+
### 3. Salvar dados no VBase
115+
116+
```typescript
117+
await vbase.saveJSON('app-config', 'settings.json', {
118+
theme: 'dark',
119+
features: ['feature1', 'feature2']
120+
})
121+
```
122+
123+
### 4. Buscar arquivo binário
124+
125+
```typescript
126+
const buffer = await vbase.getFile('app-assets', 'image.png')
127+
```
128+
129+
## 🔍 Extraindo informações da requisição
130+
131+
### Opção 1: Headers HTTP
132+
133+
```typescript
134+
const account = request.headers.get('x-vtex-account')
135+
const workspace = request.headers.get('x-vtex-workspace')
136+
const authToken = request.headers.get('x-vtex-credential')
137+
```
138+
139+
### Opção 2: Query parameters
140+
141+
```typescript
142+
const account = request.nextUrl.searchParams.get('account')
143+
const workspace = request.nextUrl.searchParams.get('workspace')
144+
```
145+
146+
### Opção 3: Do hostname
147+
148+
```typescript
149+
const host = request.headers.get('host') || ''
150+
const hostParts = host.split('.')
151+
const account = hostParts[0] // ex: myaccount.vtexcommercestable.com.br
152+
```
153+
154+
### Opção 4: Variáveis de ambiente
155+
156+
```typescript
157+
const account = process.env.VTEX_ACCOUNT
158+
const workspace = process.env.VTEX_WORKSPACE || 'master'
159+
```
160+
161+
## ⚠️ Considerações importantes
162+
163+
### Performance
164+
165+
- O middleware é executado em **cada requisição** que corresponder ao matcher
166+
- Evite fazer muitas chamadas ao VBase no middleware
167+
- Considere implementar cache para dados que não mudam frequentemente
168+
169+
### Tratamento de erros
170+
171+
- Sempre trate erros do VBase para não quebrar o site
172+
- Em caso de erro, geralmente é melhor continuar com `NextResponse.next()` do que retornar um erro 500
173+
174+
### Autenticação
175+
176+
- O `VTEX_AUTH_TOKEN` é necessário para fazer chamadas autenticadas ao VBase
177+
- Você pode obtê-lo através do VTEX IO CLI ou da plataforma VTEX
178+
179+
## 🔧 Troubleshooting
180+
181+
### Erro: "VTEX_APP_ID não está configurado"
182+
183+
Configure a variável de ambiente `VTEX_APP_ID` com o formato `vendor.app-name@major-version`.
184+
185+
### Erro: "Invalid path to access VBase"
186+
187+
Verifique se:
188+
1. O `VTEX_APP_ID` está configurado corretamente
189+
2. O formato está correto: `vendor.app-name@major-version`
190+
191+
### Erro de autenticação (401)
192+
193+
Verifique se:
194+
1. O `VTEX_AUTH_TOKEN` está configurado corretamente
195+
2. O token tem permissões para acessar o VBase
196+
3. O account e workspace estão corretos
197+
198+
### Tracer não inicializa
199+
200+
O Tracer pode falhar em ambientes que não são VTEX IO. O código de exemplo inclui um fallback para usar um MockTracer. Se necessário, instale:
201+
202+
```bash
203+
npm install @tiagonapoli/opentracing-alternate-mock
204+
```
205+
206+
## 📚 Recursos adicionais
207+
208+
- [Documentação do Next.js Middleware](https://nextjs.org/docs/advanced-features/middleware)
209+
- [Documentação do @vtex/api](https://github.com/vtex/node-vtex-api)
210+
- [Documentação do VBase](https://developers.vtex.com/docs/guides/vbase-overview)
211+
212+
## 🆘 Suporte
213+
214+
Se você encontrar problemas, verifique:
215+
1. As variáveis de ambiente estão configuradas corretamente
216+
2. As versões do Next.js e @vtex/api são compatíveis
217+
3. O account e workspace estão acessíveis
218+
4. O token de autenticação está válido
219+
220+

0 commit comments

Comments
 (0)