Why deployment configuration matters in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the deployment environment variable in Next.js.

NextJS

const environment = process.env.[1];

Drag options to blanks, or click blank then click option'

ANEXT_PUBLIC_KEY

BPORT

CAPI_URL

DNODE_ENV

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable for port or API URL instead of environment mode.

The NODE_ENV variable tells Next.js the deployment environment like development or production.

2fill in blank

medium

Complete the code to import the Next.js configuration file.

NextJS

import [1] from 'next/config';

Drag options to blanks, or click blank then click option'

AnextConfig

BgetConfig

Cconfig

DuseConfig

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not a function.

The function getConfig is used to access Next.js runtime configuration.

3fill in blank

hard

Fix the error in accessing the public runtime configuration in Next.js.

NextJS

const { publicRuntimeConfig } = [1]();

Drag options to blanks, or click blank then click option'

AgetConfig

Bconfig

CuseConfig

DnextConfig

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to destructure from a variable instead of calling the function.

You must call the getConfig function to get the runtime configuration object.

4fill in blank

hard

Fill both blanks to correctly set environment variables in Next.js deployment.

NextJS

module.exports = {
  env: {
    [1]: process.env.[2]
  }
};

Drag options to blanks, or click blank then click option'

AAPI_URL

BNEXT_PUBLIC_API_URL

CAPI_SECRET

DDATABASE_URL

Attempts:

3 left

💡 Hint

Common Mistakes

Using secret keys as public variables.

Not prefixing public variables correctly.

Public environment variables in Next.js start with NEXT_PUBLIC_. Here, NEXT_PUBLIC_API_URL is set from process.env.API_URL.

5fill in blank

hard

Fill all three blanks to create a Next.js server action that uses environment variables.

NextJS

export async function handler(req, res) {
  const apiKey = process.env.[1];
  const response = await fetch(process.env.[2] + '/data', {
    headers: { 'Authorization': `Bearer ${apiKey}` }
  });
  const data = await response.[3]();
  res.status(200).json(data);
}

Drag options to blanks, or click blank then click option'

AAPI_SECRET_KEY

BAPI_URL

Cjson

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Using public keys for secret data.

Calling wrong response parsing methods.

The server action reads the secret key API_SECRET_KEY and the base URL API_URL. It fetches data and parses it as JSON.