Mejorando la Experiencia de Usuario en Next.js con la API Nativa de Transiciones de Vista

Introducción

Una de las claves para una buena experiencia de usuario en aplicaciones web es la suavidad en las transiciones entre páginas. Con la nueva API nativa de transiciones de vista (View Transitions API), los desarrolladores pueden crear transiciones más fluidas y nativas entre páginas. En este post, exploraremos cómo integrar esta API en una aplicación Next.js.

¿Qué es la API de Transiciones de Vista?

La API de Transiciones de Vista es una nueva especificación que permite a los desarrolladores crear transiciones fluidas y nativas entre diferentes estados de la aplicación, mejorando la experiencia del usuario sin recurrir a bibliotecas pesadas o complejas.

Implementación en Next.js

1. Configuración Inicial

Primero, asegúrate de que tu entorno de desarrollo está listo y que tienes una aplicación Next.js configurada.

2. Modificar _app.tsx para Utilizar la API de Transiciones de Vista

Vamos a utilizar el evento routeChangeStart para iniciar la transición y routeChangeComplete para finalizarla.

import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      if (document.startViewTransition) {
        document.startViewTransition(() => Promise.resolve());
      }
    };

    router.events.on('routeChangeStart', handleRouteChange);
    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

3. Personalizar las Transiciones

Puedes personalizar las transiciones utilizando CSS para definir cómo se verán las animaciones. Por ejemplo:

/* styles/globals.css */
body {
  transition: opacity 0.3s ease-in-out;
}

body.transitioning {
  opacity: 0.5;
}

4. Aplicar Estilos durante las Transiciones

Utiliza JavaScript para agregar y remover la clase transitioning durante las transiciones de página:

const handleRouteChange = () => {
  document.body.classList.add('transitioning');
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      document.body.classList.remove('transitioning');
      return Promise.resolve();
    });
  } else {
    document.body.classList.remove('transitioning');
  }
};

Ejemplo Completo de _app.tsx

import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChangeStart = () => {
      document.body.classList.add('transitioning');
      if (document.startViewTransition) {
        document.startViewTransition(() => Promise.resolve());
      }
    };

    const handleRouteChangeComplete = () => {
      document.body.classList.remove('transitioning');
    };

    router.events.on('routeChangeStart', handleRouteChangeStart);
    router.events.on('routeChangeComplete', handleRouteChangeComplete);

    return () => {
      router.events.off('routeChangeStart', handleRouteChangeStart);
      router.events.off('routeChangeComplete', handleRouteChangeComplete);
    };
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

Conclusión

La API de Transiciones de Vista proporciona una forma poderosa y nativa de mejorar la experiencia del usuario con transiciones fluidas entre páginas. Implementarla en tu aplicación Next.js es sencillo y puede marcar una gran diferencia en la percepción de calidad y rendimiento de tu sitio web.

Espero que este post te haya sido útil.