Why deployment configuration matters in NextJS - See It in Action

Why deployment configuration matters

📖 Scenario: You are building a simple Next.js app that shows a welcome message. You want to prepare it for deployment by setting up a configuration that controls whether the app shows a special message for production or development environments.

🎯 Goal: Create a Next.js app that uses a deployment configuration variable to display different messages depending on the environment. This helps understand why deployment configuration matters.

📋 What You'll Learn

Create a Next.js page component with a welcome message

Add a configuration variable to indicate the deployment environment

Use the configuration variable to conditionally render a message

Complete the component to show the final message based on the config

💡 Why This Matters

🌍 Real World

Deployment configuration helps apps behave differently in development and production, such as showing debug info only in development.

💼 Career

Understanding deployment configuration is key for developers to prepare apps for real-world use and avoid exposing sensitive info or debug details in production.

1

Create the Next.js page component

Create a file called page.tsx with a React functional component named HomePage that returns a <main> element containing an <h1> with the text "Welcome to our site!".

NextJS

export default function HomePage() {
  // Your code here
}

Need a hint?

Start by defining a function named HomePage that returns JSX with a main section and a heading.

2

Add a deployment environment configuration variable

Inside the page.tsx file, create a constant called deploymentEnv and set it to the string "development".

NextJS

export default function HomePage() {
  const deploymentEnv = "development"
  // Your code here
  return (
    
      Welcome to our site!
    
  )
}

Need a hint?

Define a constant named deploymentEnv and assign it the value "development".

3

Use the configuration variable to conditionally render a message

Inside the HomePage component, add a const called message that uses a ternary operator to set the value to "You are in production mode." if deploymentEnv equals "production", otherwise "You are in development mode.".

NextJS

export default function HomePage() {
  const deploymentEnv = "development"
  const message = deploymentEnv === "production" ? "You are in production mode." : "You are in development mode."
  // Your code here
  return (
    
      Welcome to our site!
    
  )
}

Need a hint?

Use a ternary operator to set message based on the value of deploymentEnv.

4

Display the deployment message in the component

Add a <p> element inside the <main> that displays the message variable.

NextJS

export default function HomePage() {
  const deploymentEnv = "development"
  const message = deploymentEnv === "production" ? "You are in production mode." : "You are in development mode."
  return (
    
      Welcome to our site!
      {/* Add a paragraph to show the message here */}
    
  )
}

Need a hint?

Insert a paragraph element inside <main> that shows the message variable using curly braces.