Introdução | Next.js

• Introdução | Next.js

Comando para criar um projeto

npm create next-app <nome-projeto> <flags>

info

Nesse comando acima é permitido passar flags

Flags

• --empty: cria um projeto limpo

---

Pacotes de UI | Next.js

• aceternity
• https://www.smoothui.dev
• reverseui
• magicui
• eldoraui
• https://animata.design/
• animate-ui
• reactbits
• seraui
• patterncraft
• wigggle-ui
• devsloka
• buttonyui
• reui
• motion-primitives
• tool
• jolyui
• vengenceui
• originui
• prebuiltui
• componentry

---

Pacotes de Ícones | Next.js

• animateicons
• lucide

---

Regra para uso do Next.js

A Regra de Ouro

Server-first. Use o client apenas quando for realmente necessário.

Quer tirar o máximo do Next? Foque nestes pontos:

---

[→] Prefira o fetch nativo O fetch() do Next é otimizado para o server — com cache e revalidação automática.

[→] Formulários como no backend Use form actions e validação com schema no server (zod, yup, joi). Isso resolve 90% dos casos com menos dependências.

[→] Evite instalar SWR ou React Query por hábito O cache nativo do Next já cobre o essencial e se integra ao sistema de revalidação.

[→] Escreva server components por padrão Quanto mais lógica no server, menos JS vai pro cliente. Isso reduz o bundle e melhora a performance real — onde o Next brilha.

[→] Adeus spinners e estados manuais Use loading.tsx com Suspense. É mais limpo, performático e integrado ao fluxo do framework.

[→] Evite styled-components Está defasado e complica o SSR. Prefira Tailwind — simples, rápido e pronto pra uso.

[→] Middleware é ouro Autenticação, redirecionamento, geolocalização... Tudo isso roda no middleware.ts — antes da renderização, no edge e sem JS no client.

[→] Só quer rotas? Use Vite. Se sua app é 100% client-side, React + Vite entrega build mais rápido e bundle menor. Sem o peso do SSR.

---

Em resumo:

1. Next não é só sobre rotas — é sobre arquitetura server-first.
2. Sem entender render cycle, RSC e streaming, você acaba escrevendo um SPA mais complexa do que precisa.

---

Ícones no output do build

Ícone	Tipo	Quando acontece
○	Static (SSG)	Página totalmente estática
●	SSG com rotas dinâmicas	Usa generateStaticParams
ƒ	Dynamic (SSR)	Dados dinâmicos por request
λ	SSR (Pages Router)	getServerSideProps

---

Qual a vantagem de usar Next.js?

• É o controle a nível de componente (granular) as coisas que são cacheadas (requisições que vão ser estáticas / cacheadas)
• Controle de SEO também

---

Template do vscode debug | Next.js

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js Full Stack (Stable)",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "console": "integratedTerminal",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "pattern": "Local:",
        "uriFormat": "http://localhost:3000",
        "action": "debugWithChrome"
      }
    }
  ]
}

---