Componentes do Next

Uma das coisas mais legais do Next.js é ele que ele traz cinco componentes prontos para nós. Esses componentes resolvem alguns dos problemas mais comuns no frontend.

• next/link - O primeiro, introduzido na versão 1.0.0 do Next.js
• next/image - Introduzido na versão 10.0.0 do Next.js
• next/script - Introduzido na versão 11.0.0 do Next.js
• next/font - Introduzido na versão 13.0.0 do Next.js
• next/form - Introduzido na versão 15.0.0 do Next.js

Quais problemas os componentes resolvem?

Para facilitar o entendimento, para cada um dos componentes, vou listar o respectivo problema que ele resolve.

Componente	Problema Resolvido
next-link	Navegação client-side entre links sem necessidade de recarregar a página - performance
next-image	Uma série de otimizações para performance em imagens
next-script	Carregar links de terceiros (ex google analytics) ou inline
next-font	Otimização e performance com fontes - especialmente para evitar layout shift
next-form	Submissão de formulário sem recarregar a página (navegação client-side)