CODEWITHSUNDEEP
next.js13nextjs14
Nick Jonas
Nick Jonas

Reputation: 115

How can I configure my Next.js website (using Static Site Generation) to apply different styles based on the environment in nextjs 13

How can I configure my Next.js website (using Static Site Generation) to apply different styles based on the environment (development vs. production) at build time? I want to ensure that when the environment is set to development, dev-specific styles are applied, and for production, a different set of styles is used. What's the best approach to achieve this?

Upvotes: -3

Views: 32

Answers (1)

Cedric Rabarijohn
Cedric Rabarijohn

Reputation: 56

In your environment variables, specify on which environment you are, (i.e: NEXT_PUBLIC_ENV) , it will be available on the client side since 'NEXT_PUBLIC' is mentionned. From there you can put your styles based on the value of your env in your theming configurations, or put it in your body's class. Here's a really simple example of how it can be implemented.

body {
  &.env-dev {
    .some-text {
      color: 'red';
    }
  }
  
  &.env-staging {
    .some-text {
      color: 'blue';
    }
  }
  
  &.env-prod {
    .some-text {
      color: 'cyan';
    }
  }
}
<html>
<body class='env-{process.env.NEXT_PUBLIC_ENV}'>
  <h1 class='some-text'>
   Hello world
  </h1>
</body>
</html>

Upvotes: 0

Related Questions