Next.js: 5 cosas que debes saber sobre este framework

Si estás buscando un framework que te permita crear con rapidez aplicaciones para web, entonces debes recurrir a Next.js. Esta es una tecnología que se ha ganado el favoritismo entre los desarrolladores estos últimos años por sus múltiples funcionalidades y beneficios.

En su página web la definen como “un framework React flexible que le brinda elementos básicos para crear aplicaciones web rápidas”. Hacen énfasis en la rapidez, un aspecto de gran valor para el mundo actual, donde la tecnología debe actualizarse minuto a minuto.

Cinco cosas que quizás no conocías sobre Next.js

Además de sus típicas funciones, Next.js ofrece otras herramientas y aspectos a sus usuarios que no son muy conocidas y aquí te vamos a explicar las cinco más importantes:

Next.js Redirects

Esta es una nueva función agregada en la versión lanzada en julio 2020 y funciona para redirigir una ruta de solicitud entrante a otro destino. Entre las formas en las que se puede redirigir una ruta de origen están la coincidencia de rutas, la coincidencia de rutas de expresiones regulares y las rutas comodín.

Además de esto, se puede utilizar la tecla de redirecciones para crear una función asíncrona para devolver una matriz de objetos, donde cada uno tiene propiedades para una redirección.

// next.config.js  

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

Next.js Rewrites

Los rewrites, o reescrituras, también llegaron con la versión 9.5 y tienen un funcionamiento similar a las redirecciones. Cuando una redirección redirija una página con código 301/302, la reescritura actúa como proxy y enmascara una nueva ruta. En la experiencia del usuario, este no sentirá el cambio de ubicación en el sitio. 

“Se aplican las mismas reglas para las reescrituras que para las redirecciones, excepto que las reescrituras no pueden sobrescribir los archivos públicos o las rutas que se generan automáticamente desde la carpeta de páginas. Estas rutas tienen prioridad sobre las reescrituras” señalan en Vercel.

// next.config.js  

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ]
  },
}

Modo de vista previa

Con esta útil función, el desarrollador Next.js tiene la capacidad de ver un borrador del contenido generado estáticamente antes de darle publicación a la web. El framework genera esta página estilo borrador en el momento de la solicitud y no en la compilación, así el desarrollador puede ver antes el contenido y corregir cualquier error presente. 

Conexión con el proceso build

En Vercel explican “Con Next.js, podemos usar el archivo next.config.js para anular los valores predeterminados, configurar Webpack o inyectar código en el proceso de compilación. Al ejecutar una secuencia de comandos durante el proceso de creación para inyectar código, Next.js puede crear un mapa del sitio, una fuente RSS o un índice de búsqueda con facilidad”.

Next.js y Preact

Si el desarrollador está creando una aplicación de Next.js y no quiere o no puede utilizar React, puede ahora recurrir a Preact. Este se puede usar solo en la compilación de producción para no perder ninguna característica en el desarrollo local. Como consejo, puede utilizar next.config.js y anular la configuración ya predeterminada de Webpack.

// next.config.js

module.exports = {
  webpack: (config, { dev }) => {
    // Replace React with Preact only in client production build
    if (!dev) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat'
      });
    }

    return config;
  }
};

El desarrollo utilizando Next.js ahora será más sencillo y rápido haciendo uso de estos tips. En Rootstack tenemos un equipo de expertos en Next.js que han podido dar solución a problemas técnicos de nuestros clientes internacionales.

Si quieres formar parte de este equipo, solo haz clic aquí y uno de nuestros reclutadores se pondrá en contacto contigo. 

Te recomendamos en video