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, }, }); 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, }, };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.
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_IDDesde 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
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, }, }Recomendé actualizar en nextjs 9.4 y superior, use este ejemplo:
.env.local NEXT_PUBLIC_SECRET_KEY=i7z7GeS38r10orTRr1iy en cualquier parte de tu código podrías usar:
.js const SECRET_KEY = process.env.NEXT_PUBLIC_SECRET_KEYtenga 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
si está utilizando la última versión de nextJs (por encima de 9)
entonces sigue estos pasos:
- Cree un archivo .env.local en la raíz del proyecto.
- Agregue el prefijo NEXT_PUBLIC_ a todas sus variables de entorno.
eg: NEXT_PUBLIC_SOMETHING=12345
- utilícelos en cualquier archivo JS como con el prefijo process.env
eg: process.env.NEXT_PUBLIC_SOMETHINGTienes que hacer un cambio simple en next.config.js
const nextConfig = { reactStrictMode: true, env:{ MYACCESSTOKEN : process.env.MYACCESSTOKEN, MYSPACEID: process.env.MYSPACEID, } } module.exports = nextConfigcámbialo así