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 { DATO = ‘dato’, … Read more
Tiempo de lectura: 2 minutosToday 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
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 minutosThis 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
Tiempo de lectura: 2 minutosToday 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 minutoToday 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
Tiempo de lectura: < 1 minutoToday 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 minutosTo deploy the web application we have created with React and Next.js, we will follow these steps: run npm build Make sure to replace your-domain.com with your actual domain and /path/to/your/application/build with the actual path to your Next.js application’s build folder. sudo systemctl restart nginx It is important to note that Nginx will only serve … Read more
Tiempo de lectura: 2 minutosToday we are going to learn how to create a React project with Next.js and run it. The first thing we are going to do is to create a new project with this command: npm create-next-app my_app Now it will ask about the configuration. I have chosen and recommend this one: Use TypeScript since it … Read more
