• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

705
Vistas
Las variables de entorno no funcionan (Next.JS 9.4.4)

Así que estoy usando Contentful API para obtener algo de contenido de mi cuenta y mostrarlo en mi aplicación Next.Js (estoy usando el siguiente 9.4.4). Muy básico aquí. Ahora, para proteger mis credenciales, me gustaría usar variables de entorno (nunca las he usado antes y soy nuevo en todo esto, así que estoy un poco perdido).

Estoy usando lo siguiente para crear el Cliente con contenido en mi archivo index.js:

 const client = require('contentful').createClient({ space: 'MYSPACEID', accessToken: 'MYACCESSTOKEN', });

MYSPACEID y MYACCESSTOKEN están codificados, por lo que me gustaría colocarlos en un archivo .env para protegerlo y no hacerlo público cuando se implemente en Vercel.

Creé un archivo .env y lo llené así:

 CONTENTFUL_SPACE_ID=MYSPACEID CONTENTFUL_ACCESS_TOKEN=MYACCESSTOKEN

Por supuesto, MYACCESSTOKEN y MYSPACEID contienen las claves correctas.

Luego, en mi archivo index.js, hago lo siguiente:

 const client = require('contentful').createClient({ space: `${process.env.CONTENTFUL_SPACE_ID}`, accessToken: `${process.env.CONTENTFUL_ACCESS_TOKEN}`, });

Pero no funciona cuando uso yarn dev , obtengo el siguiente error de consola:

 { sys: { type: 'Error', id: 'NotFound' }, message: 'The resource could not be found.', requestId: 'c7340a45-a1ef-4171-93de-c606672b65c3' }

Aquí está mi página de inicio y cómo recupero el contenido de Contentful y lo paso como accesorios a mis componentes:

 const client = require('contentful').createClient({ space: 'MYSPACEID', accessToken: 'MYACCESSTOKEN', }); function Home(props) { return ( <div> <Head> <title>My Page</title> <link rel="icon" href="/favicon.ico" /> </Head> <main id="page-home"> <Modal /> <NavTwo /> <Hero item={props.myEntries[0]} /> <Footer /> </main> </div> ); } Home.getInitialProps = async () => { const myEntries = await client.getEntries({ content_type: 'mycontenttype', }); return { myEntries: myEntries.items }; }; export default Home;

¿De dónde crees que viene mi error?

Investigando sobre mi problema, también traté de entender cómo funciona api en next.js, ya que leí que podría ser mejor crear solicitudes de api en pages/api/ pero no entiendo cómo obtener el contenido y luego pasar la respuesta a los componentes de mis páginas como lo hice aquí ...

¡Cualquier ayuda sería muy apreciada!

EDITAR:

Así que arreglé esto agregando mis variables env a mi next.config.js así:

 const withSass = require('@zeit/next-sass'); module.exports = withSass({ webpack(config, options) { const rules = [ { test: /\.scss$/, use: [{ loader: 'sass-loader' }], }, ]; return { ...config, module: { ...config.module, rules: [...config.module.rules, ...rules] }, }; }, env: { CONTENTFUL_SPACE_ID: process.env.CONTENTFUL_SPACE_ID, CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN, }, });
about 3 years ago · Santiago Trujillo
7 Respuestas
Responde la pregunta

0

 npm i --save dotenv-webpack@2.0.0 // version 3.0.0 has a bug

cree el archivo .env.development.local en la raíz. y agregue sus variables de entorno aquí:

 AUTH0_COOKIE_SECRET=eirhg32urrroeroro9344u9832789327432894@@@ NODE_ENV=development AUTH0_NAMESPACE=https:ilmrerino.auth0.com

cree next.config.js en la raíz de su aplicación.

 const Dotenv = require("dotenv-webpack"); module.exports = { webpack: (config) => { config.resolve.alias["@"] = path.resolve(__dirname); config.plugins.push(new Dotenv({ silent: true })); return config; }, };

Sin embargo, el servidor accederá a esas variables env. si desea utilizar alguna de las variables env, debe agregar una configuración más.

 module.exports = { webpack: (config) => { config.resolve.alias["@"] = path.resolve(__dirname); config.plugins.push(new Dotenv({ silent: true })); return config; }, env: { AUTH0_NAMESPACE: process.env.AUTH0_NAMESPACE, }, };
about 3 years ago · Santiago Trujillo Denunciar

0

Referir documentos

Debe agregar un archivo next.config.js en su proyecto. Defina variables env en ese archivo y estarán disponibles dentro de su aplicación.

about 3 years ago · Santiago Trujillo Denunciar

0

No puede realizar este tipo de solicitud desde el lado del cliente sin exponer sus credenciales de API. Tienes que tener un back-end.

Puede usar Next.js /pages/api para realizar una solicitud a Contentful y luego pasarla a su front-end.

Simplemente cree un archivo .env , agregue variables y haga referencia a él en su ruta API de la siguiente manera:

 process.env.CONTENTFUL_SPACE_ID

Desde Next.js 9.4 no necesita next.config.js para eso.


Al agregar las variables a next.config.js , ha expuesto los secretos del lado del cliente. Cualquiera puede ver estos secretos.

Compatibilidad con nuevas variables de entorno

Cree una aplicación Next.js con Contentful e impleméntela con Vercel

Ejemplo de blog usando Next.js y Contentful

about 3 years ago · Santiago Trujillo Denunciar

0

No ponga cosas confidenciales en next.config.js sin embargo , en mi caso, tengo algunas variables env que no son sensibles en absoluto y las necesito tanto en el lado del servidor como en el lado del cliente y luego puede hacer:

 // .env file: VARIABLE_X=XYZ // next.config.js module.exports = { env: { VARIABLE_X: process.env.VARIABLE_X, }, }
about 3 years ago · Santiago Trujillo Denunciar

0

Recomendé actualizar en nextjs 9.4 y superior, use este ejemplo:

 .env.local NEXT_PUBLIC_SECRET_KEY=i7z7GeS38r10orTRr1i

y en cualquier parte de tu código podrías usar:

 .js const SECRET_KEY = process.env.NEXT_PUBLIC_SECRET_KEY

tenga en cuenta que debe ser el mismo nombre de la clave " NEXT_PUBLIC_ SECRET_KEY" y no solo "SECRET_KEY"

y cuando lo ejecute asegúrese de que en el registro dice

 $ next dev Loaded env from E:\awesome-project\client\.env.local ready - started server on http://localhost:3000 ...

Para leer más sobre las variables de entorno, consulte este enlace

about 3 years ago · Santiago Trujillo Denunciar

0

si está utilizando la última versión de nextJs (por encima de 9)

entonces sigue estos pasos:

  1. Cree un archivo .env.local en la raíz del proyecto.
  1. Agregue el prefijo NEXT_PUBLIC_ a todas sus variables de entorno.
 eg: NEXT_PUBLIC_SOMETHING=12345
  1. utilícelos en cualquier archivo JS como con el prefijo process.env
 eg: process.env.NEXT_PUBLIC_SOMETHING
about 3 years ago · Santiago Trujillo Denunciar

0

Tienes que hacer un cambio simple en next.config.js

 const nextConfig = { reactStrictMode: true, env:{ MYACCESSTOKEN : process.env.MYACCESSTOKEN, MYSPACEID: process.env.MYSPACEID, } } module.exports = nextConfig

cámbialo así

about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda