React
Next
Framework opinativa full-stack react para a construção de websites modernos.
App Router
A nomenclatura do roteamento é definido a partir do nome dos diretórios do projeto. O Next utiliza esses nomes de arquivos especiais para:
| Filename | Para que serve |
|---|---|
page.tsx | É o conteúdo único daquela rota. Se está em src/app/contato/page.tsx, ele aparece em meusite.com.com/contato. |
layout.tsx | É o "esqueleto" que envolve as páginas. Ótimo para Navbar e Footer que se repetem. |
loading.tsx | Aparece automaticamente enquanto a page.tsx está carregando. |
error.tsx | Aparece se algo quebrar dentro daquela rota. |
not-found.tsx | Página 404 para aquela seção. |
src/ (opcional)
├── components/ <-- Componentes reutilizáveis
│ └── ui/
│ └── contact-form.tsx
├── app/ <-- Apenas roteamento e layouts
│ └── contato/
│ └── page.tsxTurbopack
É o bundler (otimiza, minifica, remove código não usado, etc). Ele que transpila o código.
Dependência com nuvem da Vercel
A Vercel é a empresa que basicamente criou o Next. Ela fornece sua infra para projetos Next, uma runtime otimizada para rodar essa framework. Existem feats do Next que só funcionam se hospedados na Vercel, como Image Optimization, ISR automático, Streaming e middlewares.
SaaS com Next js
Aqui está um exemplo de serviços para usar com Next para fazer um SaaS de forma prática.
Analytics
Utilizar o PostHog
- ts
- vitest
- zod
- better auth
- R2 (blob storage)
- Turso (sqlite db)
- Drizzle ORM
- shadcn UI
- resend
- abacatepay
- react hook forms