Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de Next.js

Curso Pr谩ctico de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

next.config.js

5/22
Recursos

Aportes 5

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Informaci贸n que el profesor ha a帽adido al archivo next.config.js:

module.exports = {
reactStrictMode: true,
env: {
customKey: 鈥榗ustomValue鈥,
},
basePath: 鈥/dist鈥,
compress: true,
async redirects() {
return [
{
source: 鈥/hola鈥,
destination: 鈥https://gndx.dev鈥,
permanent: true,
}
]
}
}

Elementos del archivo de configuraci贸n de NextJS
next.config.js

module.exports = {
  reactStrictMode: true,
  env: {
    customKey: 'customValue',
  },
  basePath: '/dist',
  compress: true,
  async redirects() {
    return [
      {
        source: '/hola',
        destination: 'https://gndx.dev',
        permanent: true,
      }
    ]
  }
}

Si cuando guardan todos los cambios del archivo next.config.js les aparece error 404 es por la linea:

basePath: 鈥/dist鈥,

Modifica el path, por lo tanto se tiene que borrar. Quedando asi:

module.exports = {
  reactStrictMode: true,
  env: {
    customKey: 'customValue',
  },
  compress: true,
  async redirects() {
    return [
      {
        source: '/hola',
        destination: 'https://gndx.dev',
        permanent: true,
      }
    ]
  }
}

C贸digo de la clase

module.exports = {
  reactStrictMode: true,
  env: {
    customKey: 'customValue',
  },
  /* basePath: '/dist', */ 
  // Comenta la linea basePath para evitar el error 404
  compress: true,
  async redirects() {
    return [
      {
        source : '/hola',
        destination: 'https://github.com/D4rkPK', // IMPORTANTE, el link del destino sin / 
        permanent: true,                          // ya que nos dira que no puede encontrar la ruta
      }
    ]
  }
}

Si en caso en tu next.config.js no te sale 鈥渕odule export鈥 sino que

/** @type {import('next').NextConfig} */
const nextConfig = {

puedes eliminar reemplazarlo por

module.exports = {

Sin problemas, solo debes eliminar la ultima linea y dejarlo exacto como el primer codigo de este comentario.

o bien puedes dejarlo asi

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    customKey: 'customValue',
  },
  /* basePath: '/dist', */ 
  // Comenta la linea basePath para evitar el error 404
  compress: true,
  async redirects() {
    return [
      {
        source : '/hola',
        destination: 'https://github.com/D4rkPK', // IMPORTANTE, el link del destino sin / 
        permanent: true,                          // ya que nos dira que no puede encontrar la ruta
      }
    ]
  }
}

module.exports = nextConfig

ambas formas funcionan 馃槂

next.config.js

Apuntes

  • Vamos a poder a帽adir elementos necesarios que nos ayudan en nuestro trabajo

    • compromir el sitio en gzip
    • trabajar redirecciones a nivel de servidores
    • configuraciones con variables de entorno
    • a帽adir plugins de terceros
    • entre otras
    module.exports = {
      reactStrictMode: true,
      env: {
        curstomKey: 'customValue',
      },
      basePath: '/dist',
      compress: true,
      async redirects() {
        return [
          {
            source: '/hola',
            destination: '/hello',
            permanet: true,
          },
        ];
      },
    };