Create an account or log in

Keep learning for free! Join and start boosting your career

Aprovecha el precio especial y haz tu profesi贸n a prueba de IA

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

2 D铆as
11 Hrs
38 Min
14 Seg

Moviendo las llaves a variables de entorno

3/19
Resources

How to maintain harmony between our application and servers using Open Source?

Integrating Open Source configurations into applications is quite an art, especially when balancing security and functionality. A crucial point is to manage credentials properly to prevent sensitive information from being accidentally exposed. Let's explore how to do this in Next.js, a common and proven practice in production environments.

What is the recommended approach to managing credentials?

The commonly used method involves two types of files:

  1. Example file (.env.local.example):

    • This versioned file in the repository includes only the necessary keys with dummy or empty values. This ensures that real passwords are never accidentally exposed.
    • An example of how to fill each key with a description could be:
      # .env.local.exampleNEXT_PUBLIC_SPACE=your_space_idNEXT_PUBLIC_ACCESS_TOKEN=your_contentful_access_token
    • By keeping this file in version control, you ensure that all developers know what variables are needed, without compromising security.
  2. Real file (.env.local):

    • Another file is created, identical to the example file but with the keys filled with real values. This file is out of version control thanks to the .gitignore.
    • This prevents the credentials from being accidentally uploaded to the repository, since Git does not track it.

How do we ensure that Git ignores real credentials?

To ensure that Git ignores files with sensitive information such as .env.local, the .gitignore file is used. It should be specified like this:

# Git ignore configuration.env.local

By adding .env.local to your .gitignore file, you ensure that the file is kept only on local systems and is not included in commits.

How does variable loading work in Next.js?

Next.js facilitates environment variable management automatically. When it finds a file named .env.local, it loads it and makes it available to the application through process.env. This process is native to Node.js:

// Using environment variables in Next.jsconst spaceId = process.env.NEXT_PUBLIC_SPACE;const accessToken = process.env.NEXT_PUBLIC_ACCESS_TOKEN;

These variables are integrated into the process of building and running the application, allowing secure access to critical data.

What variations exist for different environments?

In addition to the .env.local file, Next.js offers flexibility with other specialized files:

  • .env.stage: For staging environments.
  • .env.test: For testing.
  • .env.production: For production.

These files allow you to configure specific values according to the deployment environment, maintaining control over the application at any stage of its lifecycle.

How important is it for developers?

Managing credentials in a secure manner is indispensable. This approach not only protects the application, but also provides a clear workflow for developers. Those joining the project will know exactly what configurations are required thanks to the sample file.

Incorporating these practices strengthens security and ensures that credential management is not a barrier, but a powerful tool for modern application development and deployment. Keep exploring and honing your web development skills!

Contributions 3

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?

馃柋 Variables de entorno en Next.js

Recursos

Apuntes

  • Existen dos tipos de variables de entorno en Next.js, estas se diferencian principalmente del lugar de ejecuci贸n ya sea en el navegador o en el servidor
  • La forma en la que maneja Next.js las llaves es de la siguiente forma:
    • MY_VARIABLE
      • Solo disponible en el servidor (Node.js)
    • NEXT_PUBLIC_MY_VARIABLE
      • Disponible en el cliente (navegador)
  • El motivo por el que Next.js requiere agregar el prefijo NEXT_PUBLIC es porque de esta manera te hace consiente que esta variable estar谩 expuesta p煤blicamente en el navegador
馃搶 **RESUMEN:** Next.js administra las variables seg煤n las necesitemos en el servidor o lleguen al cliente, estas 煤ltimas implican que podr谩n estar expuestas en el navegador. Para hacerte consiente de la implementaci贸n de la misma requiere el prefijo `NEXT_PUBLIC`

Si alguien tiene alg煤n problema en correr el c贸digo les recomiendo usar la versi贸n v14.16.1 que usa el profesor 馃槂