Este año, el ZEIT Day Keynote comenzó destacando nuestros proyectos de código abierto, incluyendo las métricas de Next.js. Con más de 25000 estrellas en GitHub y más de 10000 sitios web que ya lo utilizan, estamos increíblemente asombrados por su crecimiento y nos encanta ver la cantidad creciente de proyectos que dependen de él.
Hoy nos enorgullece presentar la versión lista para producción Next.js 6, que incluye:
- Exportación estática sin configuración. No se necesita
next.config.jspor defecto _app.js, un punto de extensión que permite transiciones de página, límites de error y más- Soporte para Babel 7 y sintaxis de Fragmento
<> - Suites de pruebas de integración extendidas con un fuerte enfoque en seguridad
- Anotaciones Flow en el código base central
Además del lanzamiento de la versión 6.0, estamos trasladando Next.js a su propia página de inicio, nextjs.org, que incluye:
- Toda la documentación de Next.js en un solo lugar. No más búsquedas en el archivo README de GitHub
- Fusión de https://learnnextjs.com en https://nextjs.org/learn
- Una exhibición de los sitios web más impresionantes construidos con Next.js
Aplicaciones React Estáticas
Next.js se centra en la idea de pre-renderizado como medio para lograr alto rendimiento. El pre-renderizado viene en dos formas:
- Renderizado del servidor (SSR): donde cada solicitud activa un renderizado. Como resultado, el usuario final no tiene que esperar a que se descargue ningún JS para comenzar a consumir datos
- Renderizado estático (Static Rendering): donde generamos archivos estáticos que pueden servirse directamente sin ejecución de código en el servidor
Hasta ahora, la exportación estática en Next.js era muy potente pero no suficientemente fácil de usar. Requería configurar un mapa de rutas manual incluso cuando no se usaban rutas personalizadas.
Con Next.js 6, generamos automáticamente el mapa de rutas basado en el contenido de tu directorio pages/. Si no estás usando enrutamiento personalizado avanzado, no tendrás que hacer modificaciones en next.config.js. Solo ejecuta:
Para ver un ejemplo, visita este sitio web desplegado estáticamente en Vercel. El código fuente del sitio web también está disponible.
Componente App
Next.js ofrece un punto de extensibilidad llamado _document.js. Si se define, te permite anular el documento de nivel superior de tu aplicación, que renderiza el elemento <html>.
_document.js permite una extensibilidad potente, pero tiene algunas limitaciones serias. Por ejemplo, React no puede renderizar <html> o <body> directamente en el lado del cliente, por lo que _document.js está principalmente limitado a la fase inicial de pre-renderizado.
Para habilitar otros casos de uso potentes, presentamos _app.js, que es el componente de nivel superior que envuelve cada página.
Algunas diferencias entre
_document.jsy_app.js
Veamos algunos casos de uso que permite definir _app.js.
Transiciones de Página
Ejemplo de transiciones de página:
page-transitions-app-next.vercel.apppor Xavier Cazalot (Código fuente)
En este ejemplo, cada página puede ser accedida, pre-renderizada y cargada de forma perezosa de manera independiente. Sin embargo, cuando hacemos la transición en el lado del cliente, son posibles animaciones fluidas.
Mejor Integración con Apollo y Redux
Ya teníamos numerosos ejemplos de integración con frameworks de gestión de estado y datos como Apollo y Redux.
Con _app.js, sin embargo, ahora es aún más simple incluirlos. Aquí hay algunos ejemplos:
Mejor Manejo de Errores
React ofrece un método de componente llamado componentDidCatch que te permite capturar y manejar excepciones que surgen de componentes anidados en el lado del cliente.
En muchos casos, debido a la naturaleza inesperada de estas excepciones, es posible que desees manejarlas todas por igual en el nivel superior.
Por lo tanto, _app.js es un buen lugar para definir esa lógica de componentDidCatch. Aquí hay un ejemplo de límites de manejo de errores en acción (código fuente)
Babel 7
Hemos actualizado Babel a su última versión: 7. Con ella vienen algunas características y mejoras nuevas.
Fragmentos JSX
React 16.2 introdujo la API Fragment, que te permite expresar una lista de elementos sin tener que envolverlos en un elemento HTML arbitrario como <div>:
Escribir esto puede ser tedioso, con Next.js 6 puedes usar la nueva sintaxis de fragmento JSX para facilitar la creación de fragmentos:
.babelrc Anidado
Si tienes un directorio anidado en tus aplicaciones Next.js que requiere una configuración diferente de Babel, ahora es posible incluir un archivo .babelrc específico solo en ese directorio
Soporte de Primera Clase para TypeScript
Cuando anunciamos webpack universal, señalamos que era posible usar TypeScript a través de ts-loader, ya que ahora ejecutamos webpack tanto en el servidor como en el cliente.
Babel 7 incluye soporte incorporado para TypeScript (anteriormente solo Flow era compatible con Babel).
Para usarlo, solo instala la última versión de @zeit/next-typescript o consulta este ejemplo.
Nextjs.org
Estamos muy contentos de presentar el nuevo nextjs.org, construido por el colaborador principal de Next.js Jimmy Moon.
Para comenzar, destacamos un video acelerado que te muestra cómo crear una PWA con renderizado del servidor desde cero en 5 minutos:
El video de apertura de
nextjs.org
Un solo lugar para nuestra documentación
Cuando necesites buscar algo rápidamente, dirígete a nextjs.org/docs:
La documentación siempre reflejará la última versión estable
Aprende, paso a paso
Anteriormente, recomendábamos a los principiantes que visitaran https://learnnextjs.com para una guía paso a paso (¡con cuestionarios!) sobre cómo comenzar con Next.js
Ahora lo hemos integrado directamente en nextjs.org/learn para que sea aún más fácil comenzar a aprender:
La forma más fácil de comenzar a aprender Next.js
Inspírate
Ahora presentamos una exhibición de algunos sitios web y aplicaciones atractivos construidos con Next.js. Dirígete a nextjs.org/showcase para inspirarte, o envía el tuyo!
Exhibición de proyectos construidos con Next.js