O que é Next.js, na prática, em 15 minutos!
Next.js é um framework de desenvolvimento web que permite a criação de aplicações React de forma simples e rápida. Ele foi criado para resolver os principais desafios do desenvolvimento web, como renderização do lado do servidor, pré-renderização estática e geração de páginas dinâmicas.
Na prática, em apenas 15 minutos, é possível criar uma aplicação web simples usando Next.js. Vamos mostrar como fazer isso passo a passo:
Passo 1: Instalação do Next.js
Primeiro, certifique-se de que você tem o Node.js instalado em seu computador. Em seguida, abra o terminal e execute o seguinte comando:
npx create-next-app my-next-app
Isso criará um novo projeto Next.js chamado “my-next-app” em um diretório com o mesmo nome. Em seguida, navegue até o diretório do projeto:
cd my-next-app
Passo 2: Criando uma página
Agora que o projeto está criado, você pode adicionar uma nova página. Crie um arquivo chamado “about.js” dentro da pasta “pages” com o seguinte conteúdo:
import React from 'react';
function About() {
return (
Sobre
Este é um exemplo de página usando Next.js!
);
}
export default About;
Passo 3: Iniciando o servidor de desenvolvimento
Finalmente, execute o seguinte comando para iniciar o servidor de desenvolvimento:
npm run dev
Agora, abra um navegador e digite “http://localhost:3000/about” na barra de endereços. Você verá a página “Sobre” que acabamos de criar!
Em apenas 15 minutos, você criou uma aplicação web simples usando Next.js. Este é apenas o começo, Next.js oferece muitos recursos poderosos que podem ser explorados para criar aplicações web mais complexas. Experimente e descubra as maravilhas deste framework de desenvolvimento web!
Conheça meus cursos em https://www.luiztools.com.br/meus-cursos
Tem algum vídeo ou como seria pra fazer no caso de já ter o projeto com react js e adaptar pra usar next js?
Quall seria o ideal Luiz iniciar pelo React ou pelo Next buscando um desenvolvimento fullstack ?
É tipo um php só que com javascript rs
deu para assimilar bem porem esse lance de SSR nao entendi muito bem. esse lance de carregar primeiro no servidor nao ficou claro
Top de mais!
O que é Next.js, na prática, em 07 minutos! Vai tranquilo 2x
sensacional
Bom material Luiz, gostei bastante do contéudo,uma pergunta estou entrando no mercado a necessidade de adquirir o conhecimento de ReactJS, ou posso focar totalmente em Next.jS ?
Olá Luiz! Parabéns pelas excelentes explicações em tudo o que vc posta! Criei o app com o comando: npx create-next-app <meuprojeto> conforme mostrado no vídeo, mas não foi criado pastas dentro da pasta app e ao criar a o arquivo mint.tst e tentar abrir no navegador, exibe 404 – Not found . . . e exibe esta msg no terminal: Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
at AppContainer (C:UsersPortoDocumentsCursosLuiz Tools – Javascript ReactJS NextJS etcmeunextnewnode_modulesnextdistserverrender.js:323:29) – Versão do meu node: v16.15.1
é necessário ter o react instalado para instalar o next?
Cara, que didatica incrivel. Parabens!
Muito bom video, obrigado <3
Pq n tá na versão 13?
Então o Next cria vários arquivos html para uma aplicação React e quando o usuário solicita o html o back-end envia o conteúdo para o cliente (browser) ? É isso?
Parabéns! muito boa a sua aula. direto e bem explicado!!
Muito boa explicação. Excelente didática.
ótimo vídeo!!
o meu veio com app node_modules public, nao veio src
Muito bom e objetivo para quem quer entender rapidamente do que se trata com uma demonstração da estrutura dos arquivos.