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
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
Tiempo de lectura: 2 minutos Hoy vamos a aprender una forma de crear un componente Head que se repita en nuestras páginas y nos sirva para personalizar cada página que visitamos, de forma que se construya sobre un Server Side Render (SSR). Lo primero que vamos a hacer es crearnos un objeto con los atributos que vamos a pasar a … Leer más
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
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
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
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
Tiempo de lectura: < 1 minuto Hoy os voy a compartir una configuración Docker Compose muy necesaria y que os permitirá en pocos minutos desplegar una web completamente funcional usando Nginx y React con Next.js Lo primero que tenéis que hacer es crear el archivo docker-compose.yml Ahora vamos a crear un Dockerfile: Ahora creamos las carpetas config/nginx y añadimos el fichero … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos crear un build (con la carpeta) con React Next.js. Lo primero que tenemos que hacer es ir al archivo next.config.mjs que tiene por defecto: Lo cambiaremos por: Y ahora cuando invoquemos el comando de generar build: Nos generará la carpeta /build con el contenido de la web. isMa Ingeniero … Leer más
Tiempo de lectura: 2 minutos Para desplegar la web que hemos creado con React y Next.js vamos a seguir estos pasos: Asegúrate de reemplazar tu-domino.com con tu dominio real y /ruta/a/tu/aplicacion/build con la ruta real de la carpeta build de tu aplicación Next.js. Es importante tener en cuenta que Nginx solo se encargará de servir los archivos estáticos generados por … Leer más
