translation

This is an AI translated post.

Sunrabbit

[Next.js] Runtime env injection

Select Language

  • English
  • 汉语
  • Español
  • Bahasa Indonesia
  • Português
  • Русский
  • 日本語
  • 한국어
  • Deutsch
  • Français
  • Italiano
  • Türkçe
  • Tiếng Việt
  • ไทย
  • Polski
  • Nederlands
  • हिन्दी
  • Magyar

Summarized by durumis AI

  • In Next.js, .env is set at build time, but there are cases where environment variables need to be set according to the operating environment (local, dev, qa, prod) after the build.
  • Windows users cannot use existing Unix-based scripts, so they need to install cross-env to write scripts that work on both Windows and Unix environments.
  • Cross-env was applied to the start and dev commands to set environment variables and the script was simplified to improve readability.

In Next.js, .env is hardcoded during the build time.


However, there are many needs to set env when running the built image, not during build time.

This is usually because we handle them as local, dev, qa, prod.


So how can we achieve that?


Most of the context is similar to the article below.



However, the article above rejects Windows.

It can be seen that the Unix grammar is included in the script of package.json.

This means that Windows users who do not use dirty Unix, are clean, honest, and full of consideration, cannot use the script above.


Therefore, clean and considerate Windows users need to consider Unix users and put a script that runs properly on both operating systems instead.



The solution is simple.

Just put a script that does the same thing as the grammar.

Install cross-env with the command above.


And the start command mentioned above is solved by modifying it as follows.

However, the script is too long to read, and it needs to be added to the dev command.

{
    "dev": "npm run _env:-local && next dev",
    "dev:dev": "npm run _env:dev && next dev",
    "start": "npm run _env:-local && next start",
    "_env:-local": "cross-env-shell node ./utils/cli.js next-env -e $APP_ENV",
    "_env:dev": "node ./utils/cli.js next-env -e dev"

Therefore, I organized it as above.

Sunrabbit
Sunrabbit
More than the best, I'll do my best
Sunrabbit
[React Hook] useState This document provides a detailed explanation of why React's useState hook re-renders the entire component during re-rendering, how to preserve values, and the internal implementation structure. By analyzing the ReactFiberHooks.js code, you can understand

March 14, 2024

[Observability] Vector, the log collector challenge Vector, a log collection and processing tool developed by DataDog, is written in Rust, making it easier to write log conversion code than Otel, and supports integration with Loki in Kubernetes environments using Helm. However, it can be difficult to use d

March 9, 2024

[Non-Major, Surviving as a Developer] 12. English for New Developers New developers are advised to prioritize learning IT-related terminology and syntax for improving their English skills. Understanding terms commonly used in the field, such as back-end, front-end, API, SDK, etc., can help them adapt quickly to development
투잡뛰는 개발 노동자
투잡뛰는 개발 노동자
투잡뛰는 개발 노동자
투잡뛰는 개발 노동자
투잡뛰는 개발 노동자

April 1, 2024

Let’s set up and create AWS all at once (Terraform) This blog post introduces how to use Terraform for AWS configuration automation, briefly explaining AWS CLI installation and IAM user configuration, Terraform download, and version management methods.
Alien Story
Alien Story
Alien Story
Alien Story
Alien Story

May 8, 2024

When JSON breaks in Gemini (or other LLMs) Learn how to use yaml to solve the problem of output breaking due to incorrect characters when generating JSON from LLMs such as Gemini Pro and Flash. Requesting output as yaml allows for stable output, which can then be converted back to json. However, o
해리슨 블로그
해리슨 블로그
해리슨 블로그
해리슨 블로그

June 4, 2024

Building a Slick CLI with Rust This article explains how to implement a CLI application using Rust. It creates a CLI program with login and logout functions using the clap and ratatui libraries. It introduces the overall Rust-based CLI development, including defining command options, a
곽경직
곽경직
곽경직
곽경직
곽경직

March 13, 2024

Schedule a message to say it later on Slack Learn how to schedule a message on Slack to send it at a specific time. This is useful when the person in charge is absent, or when you remember work after work. It can be used even in the free version, and provides various functions such as time setting,
여행가고싶은블로거지만여행에대해다루진않을수있어요
여행가고싶은블로거지만여행에대해다루진않을수있어요
Slack schedule to speak
여행가고싶은블로거지만여행에대해다루진않을수있어요
여행가고싶은블로거지만여행에대해다루진않을수있어요

February 7, 2024

Writing my first post on durumis durumis is a platform that automatically translates articles into 18 languages and provides various formatting functions such as bold, italic, and underline. While it does not yet support adding spaces between code blocks and quotes, you can use Shift+Ent
이것저것 잡다한 이야기
이것저것 잡다한 이야기
이것저것 잡다한 이야기
이것저것 잡다한 이야기

April 14, 2024