En esta página:
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, orientado a producción. 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.
Instalación de Next JS
Nota: Para trabajar con Next JS es vital que instales Node JS para gestionar comandos y demás acciones. Te recomendamos revisar este tutorial y seguir los pasos correspondientes para que instales Node JS.
Crea o ve a la carpeta de tu proyecto al cual le instalarás Next JS, paso seguido debemos crear un archivo package.json para gestionar nuestro proyecto, para crearlo y configurarlo ejecutamos el siguiente comando
|
1 2 3 |
$ npm init |
Seguimos los pasos y dejamos configurado nuestro archivo package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$ 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
|
1 2 3 4 5 |
"dev": "next", "build": "next build", "start": "next start" |
El código completo del archivo package.json quedaría así
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "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
|
1 2 3 4 5 6 7 8 9 |
const Index = () => ( <div> <h1>Hola <strong>Mundo</strong> !</h1> </div> ) export default Index |
Ejecutamos el siguiente comando para lanzar el servidor
|
1 2 3 4 5 6 7 8 9 10 |
$ npm run dev > next DONE Compiled successfully in 1720ms23:48:29 > Ready on https://localhost:3000 > Building page: / DONE Compiled successfully in 1310ms23:48:31 |
Abrimos nuestro navegador el servidor local de Next JS escribimos https://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.