Cómo crear un contexto en una aplicación Next.js con React

Tiempo de lectura: 3 minutos

En este tutorial, aprenderás cómo crear un contexto de tema que abarque toda tu aplicación Next.js utilizando React.

Este contexto de tema te permitirá cambiar dinámicamente entre diferentes temas en tu aplicación, como temas claro y oscuro.

Paso 1: Configuración inicial

Asegúrate de tener instalado Node.js en tu sistema. Luego, puedes crear un nuevo proyecto Next.js utilizando el siguiente comando en tu terminal:

npx create-next-app my-theme-app

Después de que se complete la instalación, accede al directorio de tu nuevo proyecto:

cd my-theme-app

Paso 2: Crear el contexto de tema

Primero, vamos a crear el contexto de tema. Crea un nuevo archivo llamado ThemeContext.tsx en el directorio components de tu proyecto y agrega el siguiente código:

// components/ThemeContext.tsx
import React, { createContext, useContext } from 'react';

// Define el tipo para el contexto
interface ThemeContextType {
  theme: string;
  setTheme: React.Dispatch<React.SetStateAction<string>>;
}

// Crea el contexto
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// Hook personalizado para usar el contexto
export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme debe ser usado dentro de un ThemeProvider');
  }
  return context;
};

// Proveedor del contexto
export const ThemeProvider: React.FC = ({ children }) => {
  const [theme, setTheme] = React.useState<string>('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

Paso 3: Implementar el proveedor de tema en la aplicación

Vamos a utilizar el proveedor de tema que acabamos de crear en toda nuestra aplicación. Abre el archivo _app.tsx en el directorio raíz de tu proyecto y modifícalo de la siguiente manera:

// pages/_app.tsx
import React from 'react';
import { AppProps } from 'next/app';
import { ThemeProvider } from '../components/ThemeContext';

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default MyApp;

Paso 4: Utilizar el contexto de tema en componentes

Ahora que hemos configurado el proveedor de tema en nuestro archivo _app.tsx, podemos acceder al contexto de tema desde cualquier componente de nuestra aplicación. Por ejemplo, en cualquier componente donde quieras cambiar el tema, puedes hacer lo siguiente:

// components/ThemeToggleButton.tsx
import React from 'react';
import { useTheme } from './ThemeContext';

const ThemeToggleButton: React.FC = () => {
  const { theme, setTheme } = useTheme();

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <button onClick={toggleTheme}>
      Cambiar Tema a {theme === 'light' ? 'oscuro' : 'claro'}
    </button>
  );
};

export default ThemeToggleButton;

Paso 5: Utilizar el contexto de tema en páginas

También puedes utilizar el contexto de tema en tus páginas de Next.js. Por ejemplo, puedes cambiar el color de fondo de la página según el tema actual. Aquí hay un ejemplo de cómo podrías hacerlo:

// pages/index.tsx
import React from 'react';
import { useTheme } from '../components/ThemeContext';

const HomePage: React.FC = () => {
  const { theme } = useTheme();

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#333' }}>
      <h1>Bienvenido a mi aplicación</h1>
      {/* Contenido de la página */}
    </div>
  );
};

export default HomePage;

Conclusiones

Ahora has creado con éxito un contexto de tema que abarca toda tu aplicación Next.js. Este contexto te permitirá cambiar dinámicamente entre diferentes temas en tu aplicación, lo que proporciona una experiencia de usuario más personalizada. Puedes seguir extendiendo este contexto para incluir más configuraciones de tema o adaptarlo según las necesidades específicas de tu aplicación.