Fixing error: Text content does not match server-rendered HTML in Next.js

Fixing error: Text content does not match server-rendered HTML in Next.js

Tiempo de lectura: < 1 minuto Today we are going to fix the common error that may occur when implementing i18n in our React environment with Next.js. This is the error: Unhandled Runtime Error Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: “” Client: “” See more info here: https://nextjs.org/docs/messages/react-hydration-error Returns only the HTML … Read more

Middleware file in Next.js

Middleware file in Next.js

Tiempo de lectura: < 1 minuto Today I’m going to explain and provide an example of middleware in Next.js A middleware in Next.js is a function that runs before a request reaches your Next.js route or API. You can use middleware to handle and manipulate incoming requests. Cookie Management: You can read, modify, or set cookies in incoming requests. Redirects: You … Read more

Default App File for Next.js

Default App File for Next.js

Tiempo de lectura: < 1 minuto Today I bring you this _app.tsx file by default in case your Next.js project doesn’t create it. This _app.tsx file is the top-level component in Next.js. All page components are rendered through this file, making it useful for global configurations. You should place this file inside pages/_app.tsx import { AppProps } from ‘next/app’ import ‘../styles/globals.css’ … Read more

Adding path-based internationalization with i18next in React and Next.js Server Side (SSR)

Adding path-based internationalization with i18next in React and Next.js Server Side (SSR)

Tiempo de lectura: 4 minutos Returns only the HTML translated, without any added content. The first thing we have to do is to install the necessary dependencies: npm install i18next next-i18next @types/i18next @types/react-i18next –save Then we are going to create a configuration file next-i18next.config.js at the root of the project: module.exports = { debug: process.env.NODE_ENV === ‘development’, i18n: { locales: … Read more

Storing Cookies and Sharing from Client Side to Server Side in Next.js

Storing Cookies and Sharing from Client Side to Server Side in Next.js

Tiempo de lectura: 2 minutos Today we are going to learn how we can store and share Cookies between Client Side and Server Side using React. For today’s tutorial, we will use the library Nookies. This library will solve our Cookie storage immediately. First, let’s create a component called CookieStorage.tsx import nookies from ‘nookies’ enum CookieKeys { DATO = ‘dato’, … Read more

Creating Dynamic Routes Using Next.js and React to Make Links with Parameters

Creating Dynamic Routes Using Next.js and React to Make Links with Parameters

Tiempo de lectura: < 1 minuto Today we’re going to learn how to create dynamic routes for linking with parameters using Next.js. The first thing we’re going to do is to create a folder within our pages called article, and inside it, we’re going to create a file named: [id].tsx Resulting in: -pages -article – [id].tsx This will allow us to … Read more

How to Create a Context in a Next.js Application with React

How to Create a Context in a Next.js Application with React

Tiempo de lectura: 2 minutos This tutorial, you will learn how to create a theme context that spans your entire Next.js application using React. Make sure you have Node.js installed on your system. Then, you can create a new Next.js project using the following command in your terminal: npm create-next-app my-theme-app After the installation is complete, navigate to your new … Read more

Folder Architecture of a React Project with Next.js

Folder Architecture of a React Project with Next.js

Tiempo de lectura: 2 minutos Today I am going to share a folder structure that you can use to organize your React project with Next.js. When working with React and Next.js, it is common to organize your project into several folders to maintain a clean and easy-to-understand structure. Here is a typical folder structure that can be used: pages: This … Read more

Docker Compose to Deploy React with Next.js in Production with Nginx + Next.js

Docker Compose to Deploy React with Next.js in Production with Nginx + Next.js

Tiempo de lectura: < 1 minuto Today I’m going to share with you a much-needed Docker Compose setup that will allow you to deploy a fully functional website using Nginx and React with Next.js in just a few minutes. The first thing you need to do is create the docker-compose.yml file: version: ‘3’ services: nextjs-app: build: context: . ports: – “3000:3000” … Read more