Siguiente.js 13

Vercel, la compañía detrás del popular marco React Next.js, lanzó la última versión del marco el 25 de octubre de 2022. Esta nueva versión, Next.js 13, incluye actualizaciones y mejoras en funciones como el diseño, la obtención de datos y el enrutamiento. , así como un empaquetador más rápido. Estos cambios están destinados a facilitar a los desarrolladores la creación de aplicaciones web rápidas, escalables y confiables utilizando React.

Una característica nueva de Next.js 13 es la introducción de segmentos de ruta, que permite a los desarrolladores crear rutas anidadas colocando páginas dentro de carpetas dentro del directorio de la aplicación. Al crear rutas dentro de estas carpetas, los desarrolladores pueden usar page.jsx en lugar de index.jsx.

En las versiones anteriores de Next.js, los desarrolladores debían crear una carpeta de diseño para compartir la interfaz de usuario entre varias páginas. Sin embargo, con el lanzamiento de Next.js 13, esto ya no es necesario, ya que el diseño ahora se incluye de forma predeterminada al crear un nuevo proyecto. El diseño de Next.js 13 es interactivo y no es necesario volver a renderizarlo, lo que facilita el trabajo de los desarrolladores.

Además de la inclusión del diseño predeterminado, Next.js 13 también presenta simplificaciones a la API para obtener datos. Las antiguas API getServerSideProps , getStaticProps y getInitialProps ya no son compatibles y se reemplazaron con una nueva API que está diseñada para ser más fácil de usar.

Similar a 'getServerSideProps'

Cuando la solicitud de envío usando getServerSideProps., debe almacenarse en caché 'sin almacenar'.

fetch(URL, { cache: 'no-store' });

Cuando la solicitud de envío utiliza getServerSideProps, debe almacenarse en caché 'force-cache'.

fetch(URL, { cache: 'force-cache' });

Cuando se almacena en caché con una vida útil de segundos

fetch(URL, { next: { revalidate: 30 } });

Turbopack es un paquete más rápido en comparación con Webpack, Vite. Además, Turbopack utiliza técnicas inteligentes de almacenamiento en caché para mejorar el manejo de los cambios de fuente de manera optimizada. Turbopack mantiene un modelo de los cambios que ya se crearon y solo crea aquellos en función de los cambios en curso. Puedes probar Turbopack si ejecutas ' next dev — — turbo'.

Turbopack da como resultado:

Actualizaciones 700 veces más rápidas que Webpack

Actualizaciones 10 veces más rápidas que Vite

Arranques en frío 4 veces más rápidos que Webpack

'usar cliente'

Los componentes se pueden representar automáticamente como un componente de servidor y si queremos usar ganchos de cliente 'useState' y 'useEffect', es necesario escribir 'use client' al principio del archivo.

'use client';

import { useState } from 'react';

export default function Navbar() {
  const [title, setTitle] = useState('React');

  return (
    <div>
      <p>{title}</p>
    </div>
  );
}

En versiones anteriores de Next.js, <a> tenía que estar anidado dentro de <Link> para representar correctamente un enlace. Sin embargo, con el lanzamiento de Next.js 13, <Link> ahora siempre muestra <a> de forma predeterminada.

import Link from 'next/link'

// Next.js 12: 
<Link href="/checkout">
  <a>About</a>
</Link>

// Next.js 13
<Link href="/checkout">
  About
</Link>

En las versiones anteriores de Next.js, se requería especificar el atributo 'alt' para la imagen para evitar un error. Sin embargo, con el lanzamiento de Next.js 13, ya no necesita el atributo 'alt'.

import Image from 'next/image';
import logo from './logo.png';

function Navbar() {
  return <Image alt="logo" src={logo} />;
}

De acuerdo con el nuevo sistema de fuentes Next.js 13, puede optimizar sus fuentes personalizadas y también usar las fuentes de Google sin ninguna solicitud del navegador. Lo único que debe hacer es instalar el paquete @next/font. Puedes usarlo así:

import { Inter } from '@next/font/google';

const inter = Inter();

Gracias, Nos vemos en el próximo artículo!!

Puedes contactarme aquí,

LinkedIn:https://www.linkedin.com/in/cerensolpan/

GitHub:https://github.com/cerensolpan

Gorjeo: https://twitter.com/cerensolpanture