Lançado · em melhoria
Framework · Desde 2016
Next.js é um framework React para sites e aplicações full stack, com roteamento por arquivos, renderização no servidor, Server Components e otimizações nativas.
Next.js é um framework React de código aberto criado pela Vercel e lançado pela primeira vez em 2016. Ele reúne o que, só com React, você teria de montar por conta própria: roteamento, renderização no servidor, geração estática, busca de dados e ferramentas de build. O App Router, a opção recomendada, é baseado em React Server Components: a estrutura de pastas do diretório app define as URLs, e o código de servidor e o de cliente convivem no mesmo projeto.
Next.js se destaca quando desempenho e visibilidade em buscadores importam igualmente, e é muito usado em sites institucionais, blogs e documentação, lojas virtuais e painéis SaaS. Cada rota pode ser pré-renderizada no build ou renderizada a cada requisição, e as partes lentas podem chegar aos poucos via streaming. Server Actions e Route Handlers cuidam de formulários e APIs, de modo que uma única base de código cobre a interface e o backend que a atende. A otimização de imagens, fontes e scripts já vem embutida.
Para começar, instale o Node.js, crie um projeto com create-next-app e siga a documentação oficial Getting Started e o curso gratuito Learn Next.js. Conhecer componentes, props e hooks do React facilita bastante; se o React for novidade para você, aprenda primeiro o básico. O TypeScript funciona sem configuração extra e é recomendado para novos projetos.
Pastas e arquivos especiais como page, layout, loading e error no diretório app definem URLs, layouts aninhados, estados de carregamento e telas de erro.
Os componentes são renderizados no servidor por padrão e não enviam JavaScript ao navegador; só as partes marcadas com "use client" rodam nele.
Combine geração estática, renderização por requisição e streaming em cada rota, mantendo o conteúdo atualizado com cache e revalidação.
Componentes de imagem, fonte e script, divisão automática de código, pré-carregamento de links e Turbopack para builds e atualizações rápidas.
Instale uma versão LTS do Node.js pelo site nodejs.org e confira a versão no terminal. O npm já vem junto; pnpm, Yarn ou Bun também funcionam.
node --versionGere um novo projeto com create-next-app. As opções recomendadas configuram TypeScript, ESLint, Tailwind CSS e o App Router.
npx create-next-app@latest my-appEntre na pasta do projeto, inicie o servidor de desenvolvimento e abra http://localhost:3000. A página é atualizada assim que você salva um arquivo.
cd my-app && npm run devNo App Router, app/page.tsx é a página inicial, em /. O componente React exportado por padrão vira a página; aqui, é um Server Component que retorna um título. Ao salvar, o navegador atualiza na hora, e adicionar app/about/page.tsx cria uma nova página /about.
app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
npx create-next-app@latest my-app && cd my-app && npm run devSeis capítulos que levam você da instalação aos conceitos essenciais de Next.js.
Tire dúvidas, compartilhe experiências e troque opiniões sobre Next.js.
Ainda não há discussões. Comece a primeira.
0 comentários
Fazer login · Faça login para deixar um comentário.
Seja o primeiro a comentar.