Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Mi primera página con Next.js y EDgrid

Next.js es un Framework (Marco de trabajo) para React que te permite crear diversos proyectos que React por si sólo no se lo permitiría. Ahora puedes iniciar un proyecto Next.js con EDgrid muy fácil.

Next.js EDgrid

Next.js es un Framework (Marco de trabajo) para React que te permite crear diversos proyectos que React por si sólo no se lo permitiría. El ejemplo más simple: Crear una página estática que sea renderizada del lado del servidor y que se pueda posicionar muy bien en los buscadores (SEO).

Según el ejemplo anterior, Next.js te permite reutilizar todo el conocimiento que tienes sobre React y poder crear páginas estáticas renderizadas del lado del servidor.

Crear un proyecto Next.js

Iniciar un nuevo proyecto Next.js es muy fácil. Sólo debes ejecutar estos comandos en tu terminal, teniendo instalado NPM.

mkdir mi-proyecto
cd mi-proyecto
npm init -y
npm install --save react react-dom next
mkdir pages

Edita el archivo package.json qué encontrarás en tu carpeta creada y reemplaza la parte de scripts por el siguiente trozo de código:

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

Dentro de la carpeta pages crea un archivo llamdo index.js y pega el siguiente código dentro:

import React, {Component} from "react"

export default class extends Component {
  render() {
    return (
      <h1>Hola EDteam</h1>
    )
  }
}

Luego de guardar el archivo, en tú consola ejecuta el siguiente comando:

npm run dev

Luego de que tu proyecto sea compilado podrás verlo en tu navegador ingresando a http://localhost:3000/

y verás el contenido Hola EDteam que tienes en tu archivo index.js como un h1. Edita ese archivo, guarda los cambios y podrás ver el nuevo contenido cargado en tu navegador sin que debas actualizar la pestaña gracias a Hot Reloading.

Perfecto, ya tienes tu primer proyecto Next.js corriendo en tu entorno de desarrollo. Así de fácil.

Combina Next.js con EDgrid

Para poder comenzar facilmente con Next.js te recomiendo que utilices un framework CSS para tu desarrollo. De esa manera tu proceso será más versatil. He creado un boilerplate muy simple para que puedas clonartelo y empezar un proyecto rápidamente con EDgrid como dependencia, de esta manera podrás utilizar directamente todos las cualidades de este framework CSS.

Puedes encontrar el código del proyecto en https://github.com/betoquiroga/nextjs-edgrid

Para crear un nuevo proyecto con este boilerplate puedes clonar el proyecto con el siguiente comando

git clone git@github.com:betoquiroga/nextjs-edgrid.git

Pero te recomiendo que hagas un fork y así podrás clonar tu propio proyecto y modificarlo a tu gusto. Al ser un proyecto completamente nuevo y simple puedes aportar. Se reciben Pull Requests :D

Espero que este aporte te sirva muchísimo. Hasta la siguiente oportunidad.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal