Tiempo de lectura: < 1 minuto We will create a 301 redirect using next.js and in this case React. We will achieve that the old URLs can be redirected to the new ones, which is good for example to apply SEO. For example, we will redirect a URL that is https://devcodelight.com/hello to https://devcodelight.com/goodbye To do this, we will first go to … Read more
Tiempo de lectura: 2 minutos Do you imagine an app that works with artificial intelligence without internet connection? Today I’ll show you how to use Transformers.js and a model like Mistral 7B quantized in the browser or on your mobile, without sending data to external servers. You’ll achieve total privacy by using your own device, it’s free to use, works … Read more
Tiempo de lectura: 2 minutos Today we are going to learn how to pass and display the number of tests that have been covered in SonarQube. For React with Vite: First, we install: npm install -D vitest-sonar-reporter Now, we go to the vitest.config.ts We add: html reporters: [‘default’, ‘vitest-sonar-reporter’], // JUnit reporter to generate test reports outputFile: ‘test-results/test-results.xml’, // XML … Read more
Tiempo de lectura: < 1 minuto We will today learn how to change the Kotlin version used in Expo. First, we need to install expo-build-properties, which will allow us to edit native project properties without modifying anything in the android folder. html npm run expo install expo-build-properties And then we modified inside our app.json and could add the kotlinVersion: DevCodeLightdevcodelight.com
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
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
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
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
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
Tiempo de lectura: 2 minutos Today we’re going to learn how to create a Pinterest-style list (Masonry List) using React with the MUI library. An unordered list like Pinterest’s allows us to see all the elements on the screen in a list format. In this example, we’ll create Material Design cards. First, we need to install the MUI lab library: … Read more
