Iniciando com Next.JS
Published: 2021-11-12 18:29:58

---
title: Iniciando com Next.JS
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Olá dev! 

O intuito desse post é explicar um pouquinho o que é Next.js e o que podemos fazer com ele. 

# O que é Next.js?

> É um **Framework React para Produção**.
> Next.js oferece a melhor experiência de desenvolvedor com todos os recursos de que você precisa para produção: renderização híbrida estática e de servidor, suporte a TypeScript, agrupamento inteligente, pré-busca de rota e muito mais. Nenhuma configuração necessária.
> 

## Vantagens:

Next.js tem várias ferramentas para te auxiliar, algumas delas:

- [Otimização de imagem](https://nextjs.org/docs/basic-features/image-optimization)
    - Com o Next.js podemos trocar a tag `<img src="" />` pelo componente `<Image  src="" />`, assim é incluído uma variedade de otimizações como: carregar somente o tamanho utilizado e quando a imagem for utilizada.
- [Next.js Analytics](https://nextjs.org/analytics)
    - Ao publicar a sua aplicação na [Vercel](https://vercel.com/home?utm_source=next-site&utm_medium=banner&utm_campaign=next-website) você tem acesso a uma ferramenta de analise em tempo real. Podendo assim, medir quantidade de visitantes, tempo de carregamento da página, entre outros.
- [Zero Config](https://nextjs.org/docs/getting-started)
    - Utilizando um simples comando no terminal, é criado uma estrutura pronta para iniciar um projeto.
- [Suporte a CSS e](https://nextjs.org/docs/basic-features/built-in-css-support) [CSS Modules](https://github.com/css-modules/css-modules)
    - O CSS Modules nos permitem separar o css em escopos, para evitar colisões.
- [Roteamento](https://nextjs.org/docs/routing/introduction)
    - A navegação entre paginas é bem simplificado, basta criar um novo arquivo com o nome da pagina desejada e o roteador já identifica como uma página.
- [Rotas Api](https://nextjs.org/docs/api-routes/introduction)
    - Com as Rotas você pode criar endpoints para retornar informações para sua aplicação.
- [Híbrido SSG e SSR](https://nextjs.org/docs/basic-features/data-fetching)
    - SSR (Server Side Render) - Renderização do lado do Servidor:
        
        Ao solicitarmos uma página de perfil de usuário, por exemplo, o servidor efetua as buscas necessárias na aplicação e banco de dados, e retorna ao navegador um HTML pronto para ser apresentado ao usuário.
        ![SSR](https://d33wubrfki0l68.cloudfront.net/ed387a6bc4f3abf8e8bd06bc006cd297a923d8c2/9f11e/images/posts/arquitetura_ssr.png)
*Fonte: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/*  
    
    - SSG (Static Site Generator) - Geração de Site Estático:
        
        São sites que não possuem conteúdos dinâmicos, uma pagina de apresentação de uma empresa, por exemplo. 
        
        ![SSG](https://d33wubrfki0l68.cloudfront.net/40b1eaa12605bdfa28328b9dc2ee5f384cbe1632/106dc/images/posts/arquitetura_ssg.png)
*Fonte: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/*  

## Como aprender Next.js

No próprio site do Next.js ([https://nextjs.org/learn/basics/create-nextjs-app](https://nextjs.org/learn/basics/create-nextjs-app)) há um curso interativo com os fundamentos de Next.js, como monitorar a performance, SEO e outras funcionalidades.

## Referências

[Nextjs.org](https://nextjs.org/)
[Qual a diferença entre SSR e SSG](https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/)