how to display different data based on vercel env

[severe mauve]

Hi @inland nacelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can display different data based on the environment by using environment variables and conditional logic in your scripts. Here's a step-by-step guide on how to do it:

1. Set up your scripts in package.json: You can specify different scripts to be run for your preview and production environments. For example:

{
  "scripts": {
    "build:production": "next build",
    "build:preview": "echo \"Let's build a preview!\" && next build"
  }
}

Source (https://vercel.com/guides/dynamic-build-commands)

2. Create a vercel.sh file: This file will contain conditional logic to run a script according to the environment. You can use the VERCEL_ENV environment variable to determine the current environment:

#!/bin/bash
 
if [[ $VERCEL_ENV == "production"  ]] ; then
  npm run build:production
else
  npm run build:preview
fi

Source (https://vercel.com/guides/dynamic-build-commands)

3. Set your Build Command to use vercel.sh: You can do this either in your vercel.json file or in the project dashboard:

• Using a vercel.json file:

{
  "buildCommand": "sh vercel.sh"
}

Source (https://vercel.com/guides/dynamic-build-commands)

• Using the project dashboard: Select your project from the dashboard and go to the Settings tab. Under Build & Development Settings, set the value of the Build Command to be sh vercel.sh.

4. Accessing Environment Variables: Inside your application, you can access environment variables through process.env.YOUR_VALUE. For example:

import fetch from 'node-fetch';
export default async function handler(request, response) {  
  const res = await fetch('<https://...',> {    
    method: 'POST',    
    body: JSON.stringify({      
      client_id: process.env.CLIENT_ID,      
      client_secret: process.env.CLIENT_SECRET,    
    }),    
    headers: { 'Content-Type': 'application/json' },  
  });

  const data = await res.json();  
  return response.status(200).json({ data });
}

Source (https://vercel.com/guides/how-to-add-vercel-environment-variables)

Remember to replace YOUR_VALUE with the actual name of your environment variable.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: