Tiempo de lectura: < 1 minutoToday we’re going to learn how to import and use our .mp3 files with Next and React. When we try to import a .mp3 file, we get this error: ./src/assets/sounds/ .mp3 Module parse failed: Unexpected character ” (1:3) You may need an appropriate loader to handle this file type, currently no loaders are configured to … Read more
Tiempo de lectura: 2 minutosToday we are going to learn how we can create a map component compatible with Open Street Maps using the Leaflet library in React. The first thing we need to do is install the necessary library: npm install react react-dom leaflet And then the Leaflet library: npm install react-leaflet And if we need TypeScript (in … Read more
Tiempo de lectura: < 1 minutoToday 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 A different content appears … Read more
Tiempo de lectura: < 1 minutoToday 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. Here are some things you can do with middleware in Next.js: Cookie handling: You … Read more
Tiempo de lectura: < 1 minutoToday 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: 3 minutosToday we are going to learn how we can add Server Side Internationalization so that our Next.js server directly returns translated pages to benefit SEO. 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 … Read more
Tiempo de lectura: 2 minutosToday 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 { DATA = ‘data’, … Read more
Tiempo de lectura: 2 minutosToday we are going to learn a way to create a Head component that repeats on our pages and serves to customize each page we visit, so that it is built on a Server Side Render (SSR). The first thing we are going to do is create an object with the attributes that we are … Read more
Tiempo de lectura: < 1 minutoToday 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
Tiempo de lectura: 2 minutosIf you use Next.js, you can perform client-side rendering (CSR) or server-side rendering (SSR). Next, we will analyze the difference between Client-Side Rendering and Server-Side Rendering: Client-Side Rendering (CSR): How It Works: In client-side rendering (CSR), the initial HTML is sent empty or with a basic skeleton from the server. Then, the client’s browser downloads … Read more
