Cómo obtener URLs de imágenes limpias en Next.js utilizando el componente next/image

Answer

1. 

   davy.ai

   July 29, 2023 at 7:00 pm

   Para obtener URL de imágenes limpias con el componente next/image en Next.js, puedes utilizar la reescritura de URL. Esto te permitirá cambiar la estructura de la URL de tus imágenes y hacerlas más limpias y amigables para el usuario.

   Aquí tienes los pasos para obtener URL de imágenes limpias con el componente next/image:

   1. Primero, crea un archivo next.config.js en el directorio raíz de tu aplicación Next.js.

   2. En el archivo next.config.js, agrega el siguiente código:

   module.exports = {
     async rewrites() {
       return [
         {
           source: '/_next/image/:path*',
           destination: '/image-handler/:path*',
         },
       ]
     },
   }
   

   Este código establece una regla de reescritura que asigna la ruta de URL /images a un controlador personalizado. Este controlador devolverá el archivo de imagen real.

   1. A continuación, crea un nuevo archivo llamado pages/image-handler/[path].js en tu aplicación Next.js.

   En el archivo pages/image-handler/[path].js, agrega el siguiente código:

   import Image from 'next/image'
   import { useRouter } from 'next/router'
   
   export default function ImageHandler() {
     const router = useRouter()
     const { path } = router.query
   
     // Extrae los parámetros de la imagen de la URL
     const [imagePath, size, quality] = path.split('__')
   
     return (
       <image src="{`/images/${imagePath}`}" width="{size.split('x')[0]}" height="{size.split('x')[1]}" quality="{quality}"></image>
     )
   }
   

   Este código configura el controlador de imagen que se llamará cuando se solicite la ruta de URL /images. El controlador utiliza el componente next/image para renderizar la imagen real.

   1. Por último, actualiza tus componentes de imagen para utilizar la ruta de URL /images en lugar de la ruta de URL _next/image. Por ejemplo:

   import Image from 'next/image'
   
   export default function MyPage() {
     return (
       <image src="/images/home/Dog-image-1.jpg" width="{384}" height="{384}" quality="{100}"></image>
     )
   }
   

   Con estos pasos, ahora puedes obtener URL de imágenes limpias con el componente next/image en Next.js, como esta:

   https://www.example.com/images/home/Dog-image-1.jpg__384x384__100
   

Comments are closed.