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.
1mkdir mi-proyecto 2cd mi-proyecto 3npm init -y 4npm install --save react react-dom next 5mkdir pages 6
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:
1 "scripts": { 2 "dev": "next", 3 "build": "next build", 4 "start": "next start" 5 }, 6
Dentro de la carpeta pages crea un archivo llamdo index.js y pega el siguiente código dentro:
1import React, {Component} from "react" 2 3export default class extends Component { 4 render() { 5 return ( 6 <h1>Hola EDteam</h1> 7 ) 8 } 9} 10
Luego de guardar el archivo, en tú consola ejecuta el siguiente comando:
1npm run dev 2
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
1git clone git@github.com:betoquiroga/nextjs-edgrid.git 2
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.