Cómo Pasar Datos Entre Páginas En Next.js Guía Completa

Jul 22, 2025 by ADMIN 56 views

Cómo pasar datos de una página a otra en Next.js

En el desarrollo de aplicaciones web con Next.js, es común encontrarse con la necesidad de compartir información entre diferentes páginas. Ya sea un usuario que ha iniciado sesión, los detalles de un producto seleccionado o la dirección de envío obtenida en un formulario, existen diversas estrategias para pasar datos de una página a otra de manera eficiente. Este artículo explorará las diferentes técnicas disponibles en Next.js para lograr este objetivo, centrándonos en sus ventajas y desventajas, y proporcionando ejemplos prácticos para su implementación.

Introducción a la transferencia de datos en Next.js

Al construir aplicaciones web con Next.js, la navegación entre páginas es una operación fundamental. A menudo, esta navegación requiere la transferencia de datos relevantes para la página de destino. En el contexto de una aplicación de carrito de compras, como la que se menciona en la pregunta original, esta necesidad se vuelve aún más evidente. Imagina que tienes una página de inicio de sesión donde el usuario introduce su dirección y, luego, deseas utilizar esa dirección en la página principal para mostrar los productos disponibles en su área. ¿Cómo puedes lograr esto de manera eficiente y segura?

Next.js, con su enfoque en el renderizado del lado del servidor (SSR) y la generación de sitios estáticos (SSG), ofrece varias opciones para abordar este desafío. Cada una de estas opciones tiene sus propias características y es adecuada para diferentes escenarios. Comprender estas opciones y sus implicaciones es crucial para construir aplicaciones Next.js robustas y escalables.

Métodos comunes para pasar datos entre páginas

Existen varios métodos comunes para transferir datos entre páginas en Next.js, cada uno con sus propias ventajas y desventajas. Los métodos más utilizados incluyen:

Query Parameters: Los parámetros de consulta son una forma sencilla de pasar datos a través de la URL. Son ideales para datos no sensibles y que deben ser accesibles al compartir la URL.
Cookies: Las cookies son pequeños archivos de texto que se almacenan en el navegador del usuario. Son útiles para persistir datos entre sesiones, como la información de inicio de sesión.
LocalStorage y SessionStorage: Estas API del navegador permiten almacenar datos localmente en el navegador del usuario. LocalStorage persiste los datos incluso después de cerrar el navegador, mientras que SessionStorage los elimina al cerrar la sesión.
Context API: La Context API de React es una forma poderosa de compartir datos entre componentes sin tener que pasar props manualmente en cada nivel del árbol de componentes. Es ideal para datos globales de la aplicación, como el estado de autenticación.
Redux o Zustand: Estas bibliotecas de gestión de estado proporcionan un almacén centralizado para el estado de la aplicación. Son útiles para aplicaciones complejas con múltiples componentes que necesitan acceder y modificar el mismo estado.

Uso de Query Parameters para transferir datos

Los query parameters son una forma común y sencilla de pasar datos de una página a otra en aplicaciones web. En Next.js, puedes aprovechar los query parameters para enviar información a través de la URL. Esta técnica es particularmente útil cuando necesitas compartir datos que no son sensibles y que deben ser accesibles al compartir la URL.

¿Qué son los Query Parameters?

Los query parameters son pares clave-valor que se agregan al final de una URL después del signo de interrogación (?). Cada parámetro se separa por un signo de ampersand (&). Por ejemplo:

https://example.com/productos?categoria=electronica&precio=100

En este ejemplo, categoria y precio son los query parameters, con los valores electronica y 100 respectivamente.

Implementación en Next.js

Para utilizar query parameters en Next.js, puedes aprovechar el objeto useRouter proporcionado por el framework. Este objeto te permite acceder a la URL actual y a sus query parameters, así como navegar a otras páginas con nuevos parámetros.

Ejemplo práctico: Pasar la dirección desde la página de Login

Considera el escenario de la aplicación de carrito de compras mencionada anteriormente. En la página de Login, el usuario introduce su dirección. Para pasar esta dirección a la página principal (Main), puedes utilizar query parameters:

// pages/login.js
import { useRouter } from 'next/router';
import { useState } from 'react';

function LoginPage() {
  const router = useRouter();
  const [direccion, setDireccion] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    router.push(`/main?direccion=${direccion}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="direccion">Dirección:</label>
      <input
        type="text"
        id="direccion"
        value={direccion}
        onChange={(e) => setDireccion(e.target.value)}
      />
      <button type="submit">Iniciar Sesión</button>
    </form>
  );
}

export default LoginPage;

En este código, cuando el usuario envía el formulario, la función handleSubmit se ejecuta. Esta función utiliza router.push para navegar a la página /main, agregando la dirección como un query parameter. La URL resultante será algo como /main?direccion=Calle%20Falsa%20123.

Recuperar la dirección en la página Main

En la página Main, puedes acceder a la dirección utilizando nuevamente el objeto useRouter:

// pages/main.js
import { useRouter } from 'next/router';

function MainPage() {
  const router = useRouter();
  const direccion = router.query.direccion;

  return (
    <div>
      <h1>Página Principal</h1>
      <p>Dirección: {direccion}</p>
    </div>
  );
}

export default MainPage;

Aquí, router.query.direccion te permite acceder al valor del query parameter direccion. Este valor se utiliza para mostrar la dirección en la página Main.

Ventajas y desventajas de los Query Parameters

Ventajas

Sencillez: Los query parameters son fáciles de implementar y entender.
Compartir URL: La información en los query parameters se incluye en la URL, lo que facilita compartirla.
SEO: Los motores de búsqueda pueden indexar URLs con query parameters, lo que puede ser beneficioso para el SEO.

Desventajas

Datos no sensibles: Los query parameters son visibles en la URL, por lo que no son adecuados para datos sensibles como contraseñas o información de tarjetas de crédito.
Limitaciones de longitud: Las URLs tienen una longitud máxima, lo que puede limitar la cantidad de datos que se pueden pasar a través de query parameters.
Complejidad: Si necesitas pasar muchos datos, la URL puede volverse larga y difícil de leer.

Almacenamiento de datos en Cookies

Las cookies son pequeños archivos de texto que los sitios web almacenan en el navegador del usuario. Son una forma común de persistir información entre sesiones, lo que las hace útiles para almacenar datos como la información de inicio de sesión, las preferencias del usuario o los elementos del carrito de compras. En Next.js, puedes utilizar cookies para pasar datos entre páginas y mantener el estado de la aplicación.

¿Qué son las Cookies?

Las cookies contienen pares clave-valor y se asocian a un dominio específico. Cuando un usuario visita un sitio web, el sitio puede leer las cookies que ha almacenado previamente en el navegador. Esto permite al sitio recordar información sobre el usuario y personalizar su experiencia.

Implementación en Next.js

En Next.js, puedes utilizar bibliotecas como js-cookie o cookies-next para facilitar la gestión de cookies. Estas bibliotecas proporcionan una API sencilla para leer, escribir y eliminar cookies.

Ejemplo práctico: Almacenar la dirección en una Cookie

Volviendo al ejemplo de la aplicación de carrito de compras, puedes almacenar la dirección del usuario en una cookie después de que inicie sesión. Esto te permitirá acceder a la dirección en la página Main sin tener que pasarla a través de la URL.

// pages/login.js
import { useRouter } from 'next/router';
import { useState } from 'react';
import Cookies from 'js-cookie';

function LoginPage() {
  const router = useRouter();
  const [direccion, setDireccion] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    Cookies.set('direccion', direccion);
    router.push('/main');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="direccion">Dirección:</label>
      <input
        type="text"
        id="direccion"
        value={direccion}
        onChange={(e) => setDireccion(e.target.value)}
      />
      <button type="submit">Iniciar Sesión</button>
    </form>
  );
}

export default LoginPage;

En este código, después de que el usuario envía el formulario, la función Cookies.set se utiliza para almacenar la dirección en una cookie llamada direccion. Luego, el usuario es redirigido a la página /main.

Recuperar la dirección en la página Main

En la página Main, puedes acceder a la dirección leyendo la cookie:

// pages/main.js
import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';

function MainPage() {
  const [direccion, setDireccion] = useState('');

  useEffect(() => {
    const storedDireccion = Cookies.get('direccion');
    if (storedDireccion) {
      setDireccion(storedDireccion);
    }
  }, []);

  return (
    <div>
      <h1>Página Principal</h1>
      <p>Dirección: {direccion}</p>
    </div>
  );
}

export default MainPage;

Aquí, el hook useEffect se utiliza para leer la cookie direccion cuando el componente se monta. Si la cookie existe, su valor se almacena en el estado direccion y se muestra en la página.

Ventajas y desventajas de las Cookies

Ventajas

Persistencia: Las cookies pueden persistir entre sesiones, lo que significa que los datos se conservan incluso después de que el usuario cierra el navegador.
Almacenamiento moderado: Las cookies pueden almacenar una cantidad moderada de datos (hasta 4KB por dominio).
Accesibilidad: Las cookies pueden ser accedidas tanto en el cliente como en el servidor.

Desventajas

Tamaño limitado: El tamaño de las cookies es limitado, lo que puede ser un problema si necesitas almacenar grandes cantidades de datos.
Preocupaciones de privacidad: Las cookies pueden ser utilizadas para rastrear a los usuarios, lo que ha generado preocupaciones sobre la privacidad.
Complejidad: La gestión de cookies puede ser compleja, especialmente si necesitas manejar múltiples cookies y establecer opciones como la fecha de expiración y el ámbito.

LocalStorage y SessionStorage para la gestión de datos

LocalStorage y SessionStorage son API del navegador que permiten almacenar datos localmente en el navegador del usuario. Estas API ofrecen una forma sencilla de persistir datos en el lado del cliente, lo que las hace útiles para pasar datos entre páginas y mantener el estado de la aplicación. Aunque comparten similitudes, existen diferencias clave entre LocalStorage y SessionStorage que determinan su idoneidad para diferentes casos de uso.

¿Qué son LocalStorage y SessionStorage?

LocalStorage: Almacena datos indefinidamente hasta que el usuario los borre manualmente o el sitio web los elimine a través de código. Los datos almacenados en LocalStorage están disponibles para todas las ventanas y pestañas que comparten el mismo origen (dominio, protocolo y puerto).
SessionStorage: Almacena datos solo durante la duración de la sesión del navegador. Los datos se eliminan automáticamente cuando el usuario cierra la pestaña o la ventana del navegador. Los datos almacenados en SessionStorage están disponibles solo para la pestaña o ventana en la que se crearon.

Implementación en Next.js

En Next.js, puedes utilizar las API window.localStorage y window.sessionStorage para interactuar con LocalStorage y SessionStorage, respectivamente.

Ejemplo práctico: Almacenar la dirección en LocalStorage

Continuando con el ejemplo de la aplicación de carrito de compras, puedes almacenar la dirección del usuario en LocalStorage después de que inicie sesión. Esto te permitirá acceder a la dirección en la página Main incluso si el usuario cierra y vuelve a abrir el navegador.

// pages/login.js
import { useRouter } from 'next/router';
import { useState } from 'react';

function LoginPage() {
  const router = useRouter();
  const [direccion, setDireccion] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    localStorage.setItem('direccion', direccion);
    router.push('/main');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="direccion">Dirección:</label>
      <input
        type="text"
        id="direccion"
        value={direccion}
        onChange={(e) => setDireccion(e.target.value)}
      />
      <button type="submit">Iniciar Sesión</button>
    </form>
  );
}

export default LoginPage;

En este código, después de que el usuario envía el formulario, la función localStorage.setItem se utiliza para almacenar la dirección en LocalStorage con la clave direccion. Luego, el usuario es redirigido a la página /main.

Recuperar la dirección en la página Main

En la página Main, puedes acceder a la dirección leyendo el valor almacenado en LocalStorage:

// pages/main.js
import { useEffect, useState } from 'react';

function MainPage() {
  const [direccion, setDireccion] = useState('');

  useEffect(() => {
    const storedDireccion = localStorage.getItem('direccion');
    if (storedDireccion) {
      setDireccion(storedDireccion);
    }
  }, []);

  return (
    <div>
      <h1>Página Principal</h1>
      <p>Dirección: {direccion}</p>
    </div>
  );
}

export default MainPage;

Aquí, el hook useEffect se utiliza para leer el valor almacenado en LocalStorage con la clave direccion cuando el componente se monta. Si el valor existe, se almacena en el estado direccion y se muestra en la página.

Ventajas y desventajas de LocalStorage y SessionStorage

Ventajas

Capacidad de almacenamiento: LocalStorage y SessionStorage ofrecen una mayor capacidad de almacenamiento en comparación con las cookies (aproximadamente 5MB por dominio).
Sencillez: Las API son fáciles de usar y entender.
Rendimiento: El acceso a los datos almacenados en LocalStorage y SessionStorage es rápido ya que se almacenan en el navegador del usuario.

Desventajas

Solo en el cliente: Los datos almacenados en LocalStorage y SessionStorage solo son accesibles en el lado del cliente. No se pueden acceder desde el servidor.
Seguridad: Los datos almacenados en LocalStorage y SessionStorage no están encriptados y pueden ser accesibles por otros scripts en la misma página o por extensiones del navegador. Por lo tanto, no son adecuados para almacenar datos sensibles.
Sincronización: No existe un mecanismo de sincronización incorporado entre diferentes ventanas o pestañas que comparten el mismo origen.

Context API para compartir estado global

La Context API de React es una herramienta poderosa para gestionar el estado global en aplicaciones React, incluyendo las construidas con Next.js. Permite compartir datos entre componentes sin tener que pasar props manualmente a través de cada nivel del árbol de componentes. Esto facilita la gestión del estado en aplicaciones complejas y promueve la reutilización de componentes. La Context API es especialmente útil para datos que deben estar disponibles para muchos componentes, como la información del usuario autenticado, el tema de la aplicación o, en nuestro caso, la dirección del usuario.

¿Qué es la Context API?

La Context API proporciona una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel. Un Context en React es un objeto que contiene un valor y un componente Provider que permite a los componentes descendientes suscribirse a los cambios en ese valor. Los componentes que se suscriben al Context se actualizan automáticamente cuando el valor del Context cambia.

Implementación en Next.js

Para utilizar la Context API en Next.js, primero debes crear un Context. Luego, debes envolver la parte de tu aplicación que necesita acceder al Context con un Provider. Finalmente, puedes utilizar el hook useContext para acceder al valor del Context en cualquier componente descendiente.

Ejemplo práctico: Compartir la dirección con la Context API

En el contexto de la aplicación de carrito de compras, puedes crear un Context para almacenar la dirección del usuario. Esto permitirá que la página Main y otros componentes accedan a la dirección sin tener que pasarla como prop.

// context/DireccionContext.js
import { createContext, useState } from 'react';

export const DireccionContext = createContext();

export function DireccionProvider({ children }) {
  const [direccion, setDireccion] = useState('');

  return (
    <DireccionContext.Provider value={{ direccion, setDireccion }}>
      {children}
    </DireccionContext.Provider>
  );
}

En este código, se crea un Context llamado DireccionContext. El componente DireccionProvider mantiene el estado direccion y proporciona un valor que incluye la dirección y una función para actualizarla (setDireccion).

Envolver la aplicación con el Provider

Para que los componentes puedan acceder al Context, debes envolver la parte superior de tu aplicación con el DireccionProvider:

// pages/_app.js
import { DireccionProvider } from '../context/DireccionContext';

function MyApp({ Component, pageProps }) {
  return (
    <DireccionProvider>
      <Component {...pageProps} />
    </DireccionProvider>
  );
}

export default MyApp;

Actualizar la dirección en la página de Login

En la página de Login, puedes utilizar la función setDireccion proporcionada por el Context para actualizar la dirección:

// pages/login.js
import { useRouter } from 'next/router';
import { useState, useContext } from 'react';
import { DireccionContext } from '../context/DireccionContext';

function LoginPage() {
  const router = useRouter();
  const [direccionInput, setDireccionInput] = useState('');
  const { setDireccion } = useContext(DireccionContext);

  const handleSubmit = (e) => {
    e.preventDefault();
    setDireccion(direccionInput);
    router.push('/main');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="direccion">Dirección:</label>
      <input
        type="text"
        id="direccion"
        value={direccionInput}
        onChange={(e) => setDireccionInput(e.target.value)}
      />
      <button type="submit">Iniciar Sesión</button>
    </form>
  );
}

export default LoginPage;

Acceder a la dirección en la página Main

En la página Main, puedes utilizar el hook useContext para acceder a la dirección:

// pages/main.js
import { useContext } from 'react';
import { DireccionContext } from '../context/DireccionContext';

function MainPage() {
  const { direccion } = useContext(DireccionContext);

  return (
    <div>
      <h1>Página Principal</h1>
      <p>Dirección: {direccion}</p>
    </div>
  );
}

export default MainPage;

Ventajas y desventajas de la Context API

Ventajas

Gestión de estado global: Facilita la gestión de estado que necesita ser compartido entre muchos componentes.
Evita el prop drilling: Evita la necesidad de pasar props manualmente a través de cada nivel del árbol de componentes.
Reutilización de componentes: Promueve la reutilización de componentes al desacoplar el estado de la lógica de presentación.

Desventajas

Rendimiento: Las actualizaciones del Context pueden causar re-renderizaciones en todos los componentes que se suscriben al Context, lo que puede afectar el rendimiento si el Context se actualiza con frecuencia.
Complejidad: La Context API puede ser compleja de entender y configurar, especialmente para aplicaciones grandes y complejas.
No es una solución de gestión de estado completa: La Context API es adecuada para datos globales simples, pero puede no ser suficiente para aplicaciones con requisitos de gestión de estado más complejos.

Redux o Zustand para una gestión de estado avanzada

Para aplicaciones Next.js que requieren una gestión de estado más sofisticada, bibliotecas como Redux o Zustand ofrecen soluciones robustas y escalables. Estas bibliotecas proporcionan un almacén centralizado para el estado de la aplicación, lo que facilita la gestión de datos complejos y la sincronización del estado entre diferentes componentes. Si bien la Context API es adecuada para casos simples de estado global, Redux y Zustand son ideales para aplicaciones con múltiples componentes que necesitan acceder y modificar el mismo estado, así como para aplicaciones que requieren características como la persistencia del estado, el deshacer/rehacer y la depuración del estado.

¿Qué son Redux y Zustand?

Redux: Es una biblioteca de gestión de estado predecible para aplicaciones JavaScript. Redux centraliza el estado de la aplicación en un solo almacén, y los componentes pueden despachar acciones para actualizar el estado. Las actualizaciones de estado se realizan a través de funciones puras llamadas reducers, lo que facilita la depuración y la prueba del estado de la aplicación.
Zustand: Es una biblioteca de gestión de estado pequeña, rápida y escalable. Zustand utiliza un enfoque más simple y minimalista que Redux, lo que la hace más fácil de aprender y usar. Zustand también utiliza hooks para acceder y modificar el estado, lo que facilita la integración con componentes funcionales de React.

Implementación en Next.js

Tanto Redux como Zustand se pueden integrar fácilmente en aplicaciones Next.js. Ambos requieren la creación de un almacén de estado centralizado y la conexión de los componentes que necesitan acceder o modificar el estado al almacén.

Ejemplo práctico: Gestionar la dirección con Zustand

Para ilustrar cómo se puede utilizar Zustand en Next.js, consideremos el ejemplo de la aplicación de carrito de compras. En lugar de utilizar la Context API, podemos utilizar Zustand para gestionar la dirección del usuario.

// store/direccionStore.js
import create from 'zustand';

export const useDireccionStore = create((set) => ({
  direccion: '',
  setDireccion: (direccion) => set({ direccion }),
}));

En este código, se crea un almacén Zustand llamado useDireccionStore. El almacén contiene un estado direccion y una función setDireccion para actualizar el estado.

Actualizar la dirección en la página de Login

En la página de Login, puedes utilizar el hook useDireccionStore para acceder a la función setDireccion y actualizar la dirección:

// pages/login.js
import { useRouter } from 'next/router';
import { useState } from 'react';
import { useDireccionStore } from '../store/direccionStore';

function LoginPage() {
  const router = useRouter();
  const [direccionInput, setDireccionInput] = useState('');
  const setDireccion = useDireccionStore((state) => state.setDireccion);

  const handleSubmit = (e) => {
    e.preventDefault();
    setDireccion(direccionInput);
    router.push('/main');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="direccion">Dirección:</label>
      <input
        type="text"
        id="direccion"
        value={direccionInput}
        onChange={(e) => setDireccionInput(e.target.value)}
      />
      <button type="submit">Iniciar Sesión</button>
    </form>
  );
}

export default LoginPage;

Acceder a la dirección en la página Main

En la página Main, puedes utilizar el hook useDireccionStore para acceder a la dirección:

// pages/main.js
import { useDireccionStore } from '../store/direccionStore';

function MainPage() {
  const direccion = useDireccionStore((state) => state.direccion);

  return (
    <div>
      <h1>Página Principal</h1>
      <p>Dirección: {direccion}</p>
    </div>
  );
}

export default MainPage;

Ventajas y desventajas de Redux y Zustand

Ventajas

Gestión de estado centralizada: Proporcionan un almacén centralizado para el estado de la aplicación, lo que facilita la gestión de datos complejos y la sincronización del estado entre componentes.
Previsibilidad: Redux utiliza funciones puras para actualizar el estado, lo que facilita la depuración y la prueba del estado de la aplicación.
Escalabilidad: Tanto Redux como Zustand son escalables y pueden manejar aplicaciones grandes y complejas.

Desventajas

Curva de aprendizaje: Redux tiene una curva de aprendizaje más pronunciada que Zustand debido a su arquitectura más compleja.
Boilerplate: Redux requiere más código boilerplate que Zustand.
Sobrecarga: Para aplicaciones pequeñas y simples, Redux y Zustand pueden ser una sobrecarga.

Conclusión

En este artículo, hemos explorado diferentes métodos para pasar datos de una página a otra en Next.js. Desde los sencillos query parameters hasta las soluciones más robustas como Redux y Zustand, cada técnica tiene sus propias ventajas y desventajas. La elección del método adecuado dependerá de las necesidades específicas de tu aplicación, incluyendo la sensibilidad de los datos, la cantidad de datos a transferir y la complejidad de la gestión del estado.

Al comprender las diferentes opciones disponibles, puedes construir aplicaciones Next.js más eficientes, escalables y fáciles de mantener. Recuerda evaluar cuidadosamente los requisitos de tu proyecto y seleccionar la técnica que mejor se adapte a tus necesidades.