Empezando con Next.js

Next.js es un marco de Node.js muy popular que permite una representación sencilla de React del lado del servidor y proporciona muchas otras características sorprendentes

Introducción

Trabajando en un modernoJavaScriptaplicación impulsada porReaccionares increíble hasta que te das cuenta de que hay un par de problemas relacionados con la representación de todo el contenido en el lado del cliente.

Primero, la página tarda más en volverse visible para el usuario, porque antes de que se cargue el contenido, todo el JavaScript debe cargarse y su aplicación debe ejecutarse para determinar qué mostrar en la página.

En segundo lugar, si está creando un sitio web disponible públicamente, tiene un problema de SEO de contenido. Los motores de búsqueda están mejorando en la ejecución e indexación de aplicaciones JavaScript, pero es mucho mejor si podemos enviarles contenido en lugar de dejar que lo averigüen.

La solución a ambos problemas esrepresentación del servidor, también llamadopre-renderizado estático.

Next.js es un marco de React para hacer todo esto de una manera muy simple, pero no se limita a esto. Sus creadores lo anuncian comoCadena de herramientas de configuración cero y comando único para aplicaciones React.

Proporciona una estructura común que le permite crear fácilmente una aplicación React de interfaz y manejar de forma transparente la representación del lado del servidor.

Principales características

Aquí hay una lista no exhaustiva de las características principales de Next.js:

  • Recarga de Hot Code: Next.js vuelve a cargar la página cuando detecta cualquier cambio guardado en el disco.
  • Enrutamiento automático: cualquier URL se asigna al sistema de archivos, a los archivos colocados en elpagescarpeta, y no necesita ninguna configuración (tiene opciones de personalización, por supuesto).
  • Componentes de un solo archivo: usandostyled-jsx, completamente integrado como construido por el mismo equipo, es trivial agregar estilos dentro del alcance del componente.
  • Representación del servidor: puede (opcionalmente) renderizar componentes de React en el lado del servidor, antes de enviar el HTML al cliente.
  • Compatibilidad de ecosistemas: Next.js funciona bien con el resto del ecosistema JavaScript, Node y React.
  • División automática de código: las páginas se renderizan solo con las bibliotecas y JavaScript que necesitan, no más.
  • Precarga: laLinkcomponente, utilizado para vincular diferentes páginas, admite unprefetchprop que busca automáticamente los recursos de la página (incluido el código que falta debido a la división del código) en segundo plano.
  • Componentes dinámicos: puede importar módulos JavaScript y componentes React dinámicamente (https://github.com/zeit/next.js#dynamic-import).
  • Exportaciones estáticas: utilizando lanext export, Next.js le permite exportar un sitio completamente estático desde su aplicación.

Instalación

Next.js es compatible con todas las plataformas principales: Linux, macOS, Windows.

Un proyecto Next.js se inicia fácilmente connpm:

npm install next react react-dom

Empezando

Crear unpackage.jsonarchivo con este contenido:

{
  "scripts": {
    "dev": "next"
  }
}

Si ejecuta este comando ahora:

npm run dev

el script generará un error quejándose de no encontrar elpagescarpeta. Esto es lo único que necesita Next.js para ejecutarse.

Crea un vacíopagescarpeta, y ejecute el comando nuevamente, y Next.js iniciará un servidor enlocalhost:3000.

Si va a esa URL ahora, será recibido por una página 404 amigable, con un diseño limpio y agradable.

A 404 page returned by Next.js

Next.js también maneja otros tipos de errores, como 500 errores, por ejemplo.

Crear una pagina

En elpagescarpeta crea unindex.jsarchivo con un componente funcional simple de React:

export default () => (
  <div>
    <p>Hello World!</p>
  </div>
)

Si tú visitaslocalhost:3000, este componente se renderizará automáticamente.

¿Por qué esto es tan simple?

Next.js usa una estructura de páginas declarativa, que se basa en la estructura del sistema de archivos.

Las páginas están dentro de unpagescarpeta, y la URL de la página está determinada por el nombre del archivo de página. El sistema de archivos es la API de páginas.

Representación del lado del servidor

Abra la fuente de la página,View -> Developer -> View Sourcecon Chrome.

Como puede ver, el HTML generado por el componente se envía directamente en la fuente de la página. No se representa en el lado del cliente, sino que se representa en el servidor.

El equipo de Next.js quería crear una experiencia de desarrollador para las páginas renderizadas por el servidor similar a la que obtienes al crear un proyecto PHP básico, por ejemplo, donde sueltas archivos PHP y los llamas, y se muestran como páginas. Internamente, por supuesto, todo es muy diferente, pero la aparente facilidad de uso es clara.

Agregar una segunda página

Creemos otra página, enpages/contact.js

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
  </div>
)

Si apunta su navegador alocalhost:3000/contactesta página será renderizada. Como puede ver, esta página también está renderizada por el servidor.

Recarga en caliente

Tenga en cuenta que no tuvo que reiniciar elnpmproceso para cargar la segunda página. Next.js hace esto por ti bajo el capó.

Representación del cliente

La representación del servidor es muy conveniente en la carga de la primera página, por todas las razones que vimos anteriormente, pero cuando se trata de navegar dentro del sitio web, la representación del lado del cliente es clave para acelerar la carga de la página y mejorar la experiencia del usuario.

Next.js proporciona unaLinkcomponente que puede utilizar para crear enlaces. Intente vincular las dos páginas anteriores.

Cambioindex.jsa este código:

import Link from 'next/link'

export default () => ( <div> <p>Hello World!</p> <Link href=’/contact’> <a>Contact me!</a> </Link> </div> )

Ahora regrese al navegador y pruebe este enlace. Como puede ver, la página de contacto se carga inmediatamente, sin actualizar la página.

Esta es la navegación del lado del cliente que funciona correctamente, con soporte completo paraAPI de historial, lo que significa que el botón de retroceso de los usuarios no se romperá.

Si tu ahoracmd-clickel enlace, la misma página de Contacto se abrirá en una nueva pestaña, ahora renderizada por el servidor.

Páginas dinámicas

Un buen caso de uso para Next.js es un blog, ya que es algo que todos los desarrolladores saben cómo funciona, y es una buena opción para un ejemplo simple de cómo manejar páginas dinámicas.

Una página dinámica es una página que no tiene contenido fijo, sino que muestra algunos datos basados en algunos parámetros.

Cambioindex.jsa

import Link from 'next/link'

const Post = (props) => ( <li> <Link href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post title=‘Yet another post’ /> <Post title=‘Second post’ /> <Post title=‘Hello, world!’ /> </li> </ul> </div> )

Esto creará una serie de publicaciones y completará el parámetro de consulta del título con el título de la publicación:

The posts list

Ahora crea unpost.jsarchivo en elpagescarpeta y agregue:

export default (props) => <h1>{props.url.query.title}</h1>

Ahora, al hacer clic en una sola publicación, se mostrará el título de la publicación en unh1etiqueta:

A single post

Puede utilizar URL limpias sin parámetros de consulta. El componente Link de Next.js nos ayuda al aceptar unasatributo, que puede utilizar para pasar una babosa:

import Link from 'next/link'

const Post = (props) => ( <li> <Link as={/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">slug</span><span style="color:#e6db74">}</span><span style="color:#e6db74">} href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post slug=‘yet-another-post’ title=‘Yet another post’ /> <Post slug=‘second-post’ title=‘Second post’ /> <Post slug=‘hello-world’ title=‘Hello, world!’ /> </li> </ul> </div> )

CSS en JS

Next.js por defecto proporciona soporte parastyled-jsx, que es una solución CSS-in-JS proporcionada por el mismo equipo de desarrollo, pero puede usar la biblioteca que prefiera, comoComponentes con estilo.

Ejemplo:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx>{`
      p {
        font-family: 'Courier New';
      }
      a {
        text-decoration: none;
        color: black;
      }
      a:hover {
        opacity: 0.8;
      }
    `}</style>
  </div>
)

Los estilos están sujetos al componente, pero también puede editar estilos globales agregandoglobalhaciastyleelemento:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx global>{`
      body {
        font-family: 'Benton Sans', 'Helvetica Neue';
        margin: 2em;
      }
      h2 {
        font-style: italic;
        color: #373fff;
      }
    `}</style>
  </div>
)

Exportar un sitio estático

Una aplicación Next.js se puede exportar fácilmente como un sitio estático, que se puede implementar en uno de los hosts de sitios estáticos súper rápidos, comoNetlifyoAlojamiento de Firebase, sin la necesidad de configurar un entorno de nodo.

El proceso requiere que declare las URL que componen el sitio, pero esun proceso sencillo.

Desplegando

Crear una copia de la aplicación lista para producción, sin mapas de origen u otras herramientas de desarrollo que no se necesitan en la compilación final, es fácil.

Al comienzo de este tutorial, creó unpackage.jsonarchivo con este contenido:

{
  "scripts": {
    "dev": "next"
  }
}

que era la forma de poner en marcha un servidor de desarrollo utilizandonpm run dev.

Ahora solo agregue el siguiente contenido apackage.jsonen lugar de:

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

y prepara tu aplicación ejecutandonpm run buildynpm run start.

Ahora

Zeit ahora se llamaVercel, y este tutorial puede estar desactualizado

La empresa detrás de Next.js ofrece un servicio de alojamiento impresionante para aplicaciones Node.js, llamadoAhora.

Por supuesto, integran ambos productos para que pueda implementar aplicaciones Next.js sin problemas,una vez que haya instalado Now, ejecutando elnowcomando en la carpeta de la aplicación.

Detrás de escena Ahora configura un servidor para ti, y no necesitas preocuparte por nada, solo espera a que la URL de tu aplicación esté lista.

Zonas

Puede configurar varias instancias de Next.js para escuchar diferentes URL, pero la aplicación para un usuario externo parecerá que está siendo impulsada por un solo servidor:https://github.com/zeit/next.js/#multi-zones

Complementos

Next.js tiene una lista de complementos enhttps://github.com/zeit/next-plugins

Kit de inicio en Glitch

Si está buscando experimentar, le recomiendo Glitch. Echa un vistazo a miNext.js Glitch Starter Kit.

Leer más sobre Next.js

No puedo describir todas las características de este gran marco, y el lugar principal para leer más sobre Next.js esel archivo léame del proyecto en GitHub.

Descarga mi gratisManual de Next.js


Más próximos tutoriales: