Next.js

Tiempo de lectura: 3 minutos Today 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 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 { DATA = ‘data’, … Read more

Tiempo de lectura: 2 minutos Today 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 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

Tiempo de lectura: 2 minutos If 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

Tiempo de lectura: 3 minutos In this tutorial, you will learn how to create a theme context that spans your entire Next.js application using React. This theme context will allow you to dynamically switch between different themes in your application, such as light and dark themes. Step 1: Initial setup Make sure you have Node.js installed on your system. Then, … Read more

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

Tiempo de lectura: < 1 minuto Today we will learn how to create a build (with the folder) using React Next.js. The first thing we need to do is go to the next.config.mjs file which by default has: /** @type {import(‘next’).NextConfig} */ const nextConfig = {}; export default nextConfig; We will change it to: /** @type {import(‘next’).NextConfig} */ const nextConfig = … Read more

Tiempo de lectura: 2 minutos To deploy the web application we have created with React and Next.js, we will follow these steps: Prepare the application for production: Run npm run build in your Next.js project to build the application. This will generate a build folder containing the optimized production files. npm run build Configure Nginx: You need to configure Nginx … Read more