Que es Next JS y Hola Mundo

Next JS de la mano con React JS nos dan la posibilidad de crear aplicaciones de alto potencial, para ello debemos tener las nociones básicas para trabajar con Next JS, en este artículo te enseñaremos a dar tus primeros pasos con este potente Framework.

Que es Next JS

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.

imagen: nextjs.org

Instalación de Next JS

Nota: Para trabajar con Next JS es vital que instalesNode JSpara gestionar comandos y demás acciones. Te recomendamos revisareste tutorialy seguir los pasos correspondientes.

Crea o ve a la carpeta de tu proyecto al cual le instalarás Next JS, paso seguido debemos crear un archivo package.jsonpara gestionar nuestro proyecto, para crearlo y configurarlo ejecutamos el siguiente comando

$ npm init

Seguimos los pasos y dejamos configurado nuestro archivo package.json

{
  "name": "hola_mundo_nextjs",
  "version": "1.0.0",
  "description": "Hola Mundo con Next JS",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "Collective Cloud",
  "license": "ISC",
  "dependencies": {}
}

Vamos a desplegar React JS y Next JS en el DOM con el siguiente comando

$ npm install --save next react react-dom
hola_mundo_nextjs@1.0.0 D:\xampp\htdocs\tutoriales\hola_mundo_nextjs
+-- next@6.1.1
| +-- @babel/core@7.0.0-beta.42
| | +-- @babel/code-frame@7.0.0-beta.42
| | | `-- @babel/highlight@7.0.0-beta.42
| | |   `-- chalk@2.4.1
| | |     +-- ansi-styles@3.2.1
| | |     | `-- color-convert@1.9.2
| | |     |   `-- color-name@1.1.1
| | |     `-- supports-color@5.4.0
| | |       `-- has-flag@3.0.0
| | +-- @babel/generator@7.0.0-
.....
..... (Instala otros paquetes necesarios)
.....

Una ves que termina de desplegar react con next Abre el archivo package.json y agregale 3 scripts

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

El código completo del archivo package.json quedaría así

{
  "name": "hola_mundo_nextjs",
  "version": "1.0.0",
  "description": "Hola Mundo con Next JS",
  "main": "index.js",
  "scripts": {
    "test": "test",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "author": "Collective Cloud",
  "license": "ISC",
  "dependencies": {
    "next": "^6.1.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

Hola Mundo

Bien ahora para ser ordenados creamos una carpeta llamada pages y dentro de esta carpeta creamos el archivo index.js le agregamos el siguiente contenido

const Index = () => (
  <div>
    <h1>Hola <strong>Mundo</strong> !</h1>
  </div>
)

export default Index

Ejecutamos el siguiente comando para lanzar el servidor

$ npm run dev
> next

 DONE  Compiled successfully in 1720ms23:48:29

> Ready on http://localhost:3000
> Building page: /
 DONE  Compiled successfully in 1310ms23:48:31

Abrimos nuestro navegador el servidor local de Next JS escribimos http://localhost:3000 y veremos nuestra primera aplicacion Hola Mundo con Next JS

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.