Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

Instalando NextJS

3/27
Recursos

Aportes 40

Preguntas 7

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Inicializar NPM

npm init -y

Instalar con NPM

npm install next react react-dom

Scripts

    "dev": "next",
    "build": "next build",
    "start": "next start"

Creamos directorio pages

mkdir pages

Iniciar con NPM

npm run dev

Anotaciones de esta clase 😊

Instalar NEXTJS

  • Requisitos

    • Node (>12,>10)
    • Git
    • Browser - Goggle Chrome - para utilizar la DevTools
  • Instalacion

    • CLI - Automatica:
    yarn create next-app
    
    • Manual
    mkdir platzi-nextjs
    
    cd platzi-nextjs
    
    npm init -y
    
    yarn add next react react-dom
    npm add next react react-dom
    
    Agregar el siguiente codigo al "script"
    
    "scripts": {
      "dev": "next",
      "build": "next build",
      "start": "next start"
    },
    

esto esta en la documentación

https://nextjs.org/docs/getting-started

Next JS es un framework basado en React JS, es decir nos ayuda a crear aplicaciones Reactivas que el servidor se encarga de renderizarla. Es muy ligero y práctico por lo que el desarrollo de aplicaciones con Javascript y React JS se nos hace más rápido y con pocas complicaciones.

22 de abril 2020
Para seguir con el curso, ejecutar
$ yarn add next [email protected] [email protected]
para que no se instale react v18, ya que hay nuevas configuraciones en esta nueva version

Basicamente si leen la documentación, es lo mismo que el video. Dejo por aquí…
https://nextjs.org/docs/getting-started

Instalando Next JS

  • Necesitas tener Node versión 12 o superior.
  • Necesitas tener git
  • Necesitas Browser con DevTools

Creamos la carpeta del proyecto y hacemos npm init -y y después npm i next react react-dom

En el archivo ‘package.json’ agregamos:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

Y creamos el directorio ‘pages’ y con ello ya podemos hacer npm run dev

¿Editor en light Theme? Estamos estudiando con un sociopata(es a modo de broma)

When … has than use sun glasses to see this course

Al día de hoy ya contamos con la versión 10 de Next https://nextjs.org/blog/next-10

actualizacion (scripts)
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”
}

30/08/2022
con npm:

npm install next react react-dom

package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

corriendo el proyecto

npm run dev 

Este profe es una joya, uno de los mejores de Platzi!

Si por casualidad les da un error cómo este:

NextJS cannot find a valid build in the ‘.next’ directory

ejecuten:

npm run dev

Así de fácil se configura un proyecto en Next? 🤯
Esta herramienta pinta genial 😄

este curso pinta genial!

yarn next react react-dom para instalar react react-dom y demas paquetes necesarios

nextjs necesita 3 script, como son:
dev "next"
build "next build"
start “next start”

la carpeta requeridas es pages ya que el framework busca este directorio, sino lo consigue da error de not found

al ejecutar: yarn dev da error por el directorio de paginas: page

Holaa 😄

Alguno sabe por que pasa esto al ejecutar el npm run dev ?

en que no tenga instalado yarn aquí le dejo el comando

npm install --global yarn

y aquí ven la versión

yarn --version
y solo falta es colocar el siguiente comando

npm install next react react-dom

espero que ayude este aporte

En codesanbox pueden crear un proyecto de Next.js sin tener que instalar nada en local

ajalas

Empezamos bien.

pero explicame las cosas hermano

Excelente tu pedagogía! Gracias Jonathan.

al 29/10/21 requiere Node 12.22.0, con la 12.21 no funcionó.

Otro node version manager para chequear es n, el repositorio lo encuentran en https://github.com/tj/n

muy buena explicacion de como empezar con nestjs, y pensar que era todo un mundo jejeje

Cómo se puede actualizar la versión de un proyecto de NexJS, que tan recomendado es y que se debe tener en cuenta en cuanto a la compatibilidad?
El actual proyecto que tengo se encuentra en la versión de Next 3.0.6. y react 15.6.1
De antemano, muchas gracias por la ayuda.

npm init -y para inicializar package.json vacio y inicial

En mi caso cuando ejecute el comando
yarn add next react react-dom
me dio: -bash: yarn: command not found

Ejecute brew install yarn y listo pude instalar Next.js

cono solo crear el directorio page, se resuelve y el app arraca

el video fue grabado en mi cumpleaños, no sirve de nada para los compañeros pero mola jaja ahora si tiene toda mi atención el curso jaja

Excelente curso, me encanta la explicación del profe!

Se ahorrarían todo esto usando el cli. Es más fácil y rápido eliminar que crear manualmente todo

No entiendo el por qué siempre me topé con divas que no me guiaron a lo básico, se agradece mucho platzi

🚧 Instalar Next.js

<h4>Apuntes</h4>

Requisitos

  • Node (> 12v, > 10v). NVM | FNM
  • Git
  • Browser - Google Chrome - DevTools

Instalación

  • CLI - Automatica
  • Manual
# Inicializar un proyecto de npm
npm init -y

Creando un package.json para instalar los paquetes

yarn add next react react-dom

Vamos a cambiar los scripts de package.json

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

Necesitamos crear un directorio llamado “pages” para luego correr

yarn dev

RESUMEN: En esta clase se pudo observar que hacer una configuración para Next.js es sencillo, solo iniciando el proyecto con npm, instalando las dependencias, creando los scripts en package.json y creando un directorio

Errores de vulnerabilidad “graves” al iniciar la instalacion con NPM