{"id":50400,"date":"2022-06-14T04:32:14","date_gmt":"2022-06-14T07:32:14","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=50400&post_type=knowledgebase&preview_id=50400"},"modified":"2025-10-01T17:04:35","modified_gmt":"2025-10-01T20:04:35","slug":"next-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/next-js\/","title":{"rendered":"O que \u00e9 Next.js? Uma An\u00e1lise do Popular Framework JavaScript"},"content":{"rendered":"

Com o Next.js denominado framework React<\/a> para produ\u00e7\u00e3o, \u00e9 poss\u00edvel construir e implantar rapidamente aplicativos de grande escala e prontos para empresas que utilizam o Next.js.<\/span><\/p>\n

\n
\n
\n
\n
\n
\n

Next.js vem com recursos que garantem que seu aplicativo ir\u00e1 do zero \u00e0 produ\u00e7\u00e3o em pouco tempo, enquanto fornece uma curva de aprendizado f\u00e1cil e com ferramentas poderosas \u00e0 sua disposi\u00e7\u00e3o.<\/p>\n

Next.js \u00e9 uma extens\u00e3o da biblioteca React original do Facebook e do plano create-react-app para fornecer um framework React extens\u00edvel, f\u00e1cil de usar e adequado para produ\u00e7\u00e3o.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n
\n
\n
\n

Neste guia, vamos explorar o Next.js, abordando os motivos pelos quais voc\u00ea deveria utiliz\u00e1-lo e exemplos de aplicativos j\u00e1 em produ\u00e7\u00e3o. Al\u00e9m disso, discutiremos os principais recursos desse framework e, por fim, aprenderemos como criar nosso primeiro aplicativo Next.js.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

<\/div><\/kinsta-auto-toc>\n

O que \u00e9 Next.js?<\/h2>\n

O Next.js \u00e9 um framework React que permite construir sites e aplicativos web est\u00e1ticos otimizados, altamente interativos e focados na experi\u00eancia do usu\u00e1rio. Conhecido por proporcionar a melhor experi\u00eancia para desenvolvedores na constru\u00e7\u00e3o de aplicativos prontos para produ\u00e7\u00e3o, com todas as funcionalidades necess\u00e1rias.<\/span><\/p>\n

\n
\n
\n
\n
\n
\n

Ele oferece renderiza\u00e7\u00e3o h\u00edbrida est\u00e1tica e de servidor, suporte a TypeScript, empacotamento inteligente, pr\u00e9-busca de rotas e muito mais, sem precisar de configura\u00e7\u00f5es adicionais.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Por que usar Next.js?<\/h2>\n

Nesta se\u00e7\u00e3o, exploraremos as raz\u00f5es pelas quais voc\u00ea deve aprender Next.js, al\u00e9m de analisarmos os diferentes aplicativos que voc\u00ea pode construir com ele.<\/p>\n

Otimiza\u00e7\u00f5es de imagem<\/h3>\n

O Next.js oferece otimiza\u00e7\u00e3o autom\u00e1tica de imagens com builds instant\u00e2neos.<\/span>\u00a0A otimiza\u00e7\u00e3o de imagens<\/a>\u00a0\u00e9 uma funcionalidade poderosa j\u00e1 integrada no Next.js,<\/span> uma vez que gerenciar e otimizar imagens requer muitas configura\u00e7\u00f5es, e quando feito manualmente, pode consumir muito do seu tempo.<\/span><\/p>\n

Internacionaliza\u00e7\u00e3o<\/h3>\n

Outra \u00f3tima funcionalidade do Next.js \u00e9 a internacionaliza\u00e7\u00e3o. <\/span>Isso permite que um aplicativo empresarial seja facilmente utilizado e traduzido em diferentes idiomas em todo o mundo. <\/span>Esse recurso \u00e9 uma extens\u00e3o do Next.js e faz com que ele seja reconhecido internacionalmente, j\u00e1 que a configura\u00e7\u00e3o de internacionaliza\u00e7\u00e3o \u00e9 simplificada.<\/span><\/p>\n

An\u00e1lises do Next.js<\/h3>\n
\n
\n
\n
\n
\n
\n

O Next.js fornece um painel anal\u00edtico que pode ser configurado para exibir dados precisos de visitantes e informa\u00e7\u00f5es da p\u00e1gina, diretamente pronto para uso. Com este recurso, \u00e9 poss\u00edvel criar rapidamente esse painel sem precisar de programa\u00e7\u00e3o ou configura\u00e7\u00f5es adicionais.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\"Painel
Painel do Next.js mostrando pontua\u00e7\u00e3o de desempenho e experi\u00eancia do usu\u00e1rio em tempo real.<\/figcaption><\/figure>\n

Zero configura\u00e7\u00e3o<\/h3>\n

Next.js compila e constr\u00f3i automaticamente, com atualiza\u00e7\u00f5es instant\u00e2neas, sem a necessidade de configura\u00e7\u00f5es extras, al\u00e9m de escalar e otimizar automaticamente seu aplicativo de produ\u00e7\u00e3o.<\/span><\/p>\n

\n
\n
\n
\n
\n
\n

Obter a atualiza\u00e7\u00e3o autom\u00e1tica em um aplicativo frontend tradicional vem com muitos obst\u00e1culos. \u00c9 necess\u00e1rio escolher e instalar as bibliotecas corretas, al\u00e9m de realizar as configura\u00e7\u00f5es para que cada biblioteca funcione corretamente. O Next.js soluciona esse problema fornecendo uma atualiza\u00e7\u00e3o autom\u00e1tica, com zero configura\u00e7\u00f5es.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Suporte pr\u00e9-constru\u00eddo para SSR, SSG e CSR<\/h3>\n

Com o Next.js, voc\u00ea tem suporte ao SSR (Server-side rendering), SSG (Static site generation) e CSR (Client-side rendering) em um \u00fanico aplicativo. Voc\u00ea pode decidir o tipo de aplicativo que deseja criar e como pretende implantar seu aplicativo para melhor atender ao seu caso de uso.<\/span><\/p>\n

\n
\n
\n
\n
\n
\n

A renderiza\u00e7\u00e3o do lado do servidor (SSR) torna o Next.js adequado para aplicativos prontos para produ\u00e7\u00e3o, direcionadas para SEO e com configura\u00e7\u00f5es simples.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Aplicativos desenvolvidos com o Next.js<\/h2>\n
\n
\n
\n
\n
\n
\n

Segue abaixo a lista dos 5 principais aplicativos desenvolvidos com Next.js, suportado por empresas Fortune 500, como GitHub<\/a>, Uber e Netflix.<\/span><\/p>\n

O Next.js \u00e9 ideal para alimentar aplicativos de pequeno \u00e0 grande porte.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

TikTok<\/h3>\n
\"A
A p\u00e1gina oficial do TikTok.<\/figcaption><\/figure>\n

TikTok \u00e9 uma plataforma social de v\u00eddeos on-line onde os usu\u00e1rios carregam v\u00eddeos para dispositivos m\u00f3veis de formato curto, com milh\u00f5es de usu\u00e1rios di\u00e1rios.<\/span><\/p>\n

A p\u00e1gina web do TikTok foi desenvolvida usando o Next.js, uma plataforma que permite escalabilidade, sendo otimizada para suportar milh\u00f5es de usu\u00e1rios ativos diariamente.<\/p>\n

Hashnode<\/h3>\n
\"A
A p\u00e1gina oficial da Hashnode.<\/figcaption><\/figure>\n

Hashnode \u00e9 uma plataforma gratuita de blogs on-line voltada para desenvolvedores, com milh\u00f5es de usu\u00e1rios registrados.<\/span><\/p>\n

Twitch Mobile<\/h3>\n
\"A
A p\u00e1gina inicial oficial do Twitch<\/figcaption><\/figure>\n

Twitch \u00e9 uma plataforma social on-line para conversar, interagir e desfrutar de diferentes tipos de conte\u00fado e entretenimento.<\/p>\n

Hulu<\/h3>\n
\"A
A p\u00e1gina inicial oficial da Hulu<\/figcaption><\/figure>\n

Hulu \u00e9 uma plataforma de streaming similar \u00e0 Netflix, permitindo aos usu\u00e1rios assistir filmes e programas de TV on-line.<\/p>\n

Binance<\/h3>\n
\"A
A p\u00e1gina inicial oficial da Binance<\/figcaption><\/figure>\n
\n
\n
\n
\n
\n
\n

Binance \u00e9 um portal popular de criptomoedas com not\u00edcias, cota\u00e7\u00f5es de pre\u00e7os e a possibilidade de comprar e vender, registrando milh\u00f5es de usu\u00e1rios ativos e negocia\u00e7\u00f5es de criptomoedas diariamente.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Para saber mais empresas e sites usando Next.js, voc\u00ea pode visitar a p\u00e1gina oficial do Next.js<\/a> para mais informa\u00e7\u00f5es.<\/p>\n

O que voc\u00ea pode construir<\/h2>\n

Abaixo est\u00e1 uma lista de aplicativos que voc\u00ea pode construir com o Next.js:<\/p>\n