Next.js

Solucionar error «Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: Client:» en Next.js y React utilizando i18n

por
Solucionar error «Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: Client:» en Next.js y React utilizando i18n

Tiempo de lectura: < 1 minuto Hoy vamos a solucionar el error común que puede aparecer cuándo estamos implementando i18n en nuestro entorno React con Next.js. Este es el error: En server aparece un contenido distinto que en client. Esto generalmente se debe a que estamos importando mal la librería i18n (el componente useTranslation). Para ello vamos a comprobar que tenemos … Leer más

Añadir internacionalización por path con i18next en React y Next.js Server Side (SSR)

por
Añadir internacionalización por path con i18next en React y Next.js Server Side (SSR)

Tiempo de lectura: 4 minutos Hoy vamos a aprender cómo podemos añadir internacionalización Server Side para que directamente nuestro servidor de Next.js nos devuelva las páginas traducidas para beneficiar al SEO. Lo primero que tenemos que hacer es instalar las dependencias necesarias: Después vamos a crear un archivo de configuración next-i18next.config.js en la raíz del proyecto: En mi caso voy … Leer más

Archivo middleware en Next.js

por
Archivo middleware en Next.js

Tiempo de lectura: < 1 minuto Hoy voy a explicar y proporcionar un ejemplo de middleware en Next.js Un middleware en Next.js es una función que se ejecuta antes de que una solicitud llegue a tu ruta o API de Next.js. Puedes usar middleware para manejar y manipular solicitudes entrantes. Aquí están algunas cosas que puedes hacer con middleware en Next.js: … Leer más

Archivo _app.tsx por defecto para Next.js

por
Archivo _app.tsx por defecto para Next.js

Tiempo de lectura: < 1 minuto Hoy os traigo este archivo _app.tsx por defecto por si no lo crea vuestro proyecto Next.js Este archivo _app.tsx es el componente de nivel superior en Next.js. Todos los componentes de página se renderizan a través de este archivo, lo que lo hace útil para configuraciones globales. Debes situar este archivo dentro de pages/_app.tsx isMa … Leer más

Almacenar Cookies y compartir en Server Side desde Client Side en Next.js

por
Almacenar Cookies y compartir en Server Side desde Client Side en Next.js

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos almacenar Cookies y compartirlas entre Client Side y Server Side usando React. Para el tutorial de hoy vamos a utilizar la librería Nookies. Esta librería nos solucionará el almacenamiento de Cookies de forma inmediata. Primero vamos a crear un componente llamado CookieStorage.tsx En este componente he creado una función … Leer más

Crear rutas dinámicas usando Next.js y React para hacer links con parámetros

por
Crear rutas dinámicas usando Next.js y React para hacer links con parámetros

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos crear rutas dinámicas para realizar links con parámetros utilizando Next.js. Lo primero que vamos a hacer es crear una carpeta dentro de nuestras páginas llamada article y dentro vamos a crear un archivo llamado: Quedando: Esto nos permitirá poder invocar la URL: Ahora dentro de la página podemos crear: … Leer más

Renderizado del Lado del Cliente (CSR) vs. Renderizado del Lado del Servidor (SSR) en Next.js

por
Renderizado del Lado del Cliente (CSR) vs. Renderizado del Lado del Servidor (SSR) en Next.js

Tiempo de lectura: 2 minutos Si usas Next.js puedes realizar el renderizado de datos del lado del cliente (CSR) o del lado del servidor (SSR). A continuación vamos a analizar la diferencia entre Renderizado del Lado del Cliente y del Lado del Servidor: Renderizado del Lado del Cliente (CSR): Renderizado del Lado del Servidor (SSR): Funciones de Obtención de Datos … Leer más

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

por
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 … Leer más

Arquitectura de carpetas de un proyecto React con Next.js

por
Arquitectura de carpetas de un proyecto React con Next.js

Tiempo de lectura: 2 minutos Hoy os voy a compartir una estructura de carpetas que podéis utilizar para organizar vuestro proyecto React con Next.js. Cuando trabajas con React y Next.js, es común organizar tu proyecto en varias carpetas para mantener una estructura limpia y fácil de entender. Aquí hay una estructura de carpetas típica que se puede utilizar: Estas son … Leer más