Que es Next JS y Hola Mundo

2 minuto(s)

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


$ npm init

$ 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": {}
}

{

"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)
.....

$ 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"

"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"
  }
}

{

"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

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 https://localhost:3000
> Building page: /
 DONE  Compiled successfully in 1310ms23:48:31