Vercel deployment (default) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to deploy a Next.js app by running the correct command in the terminal.

NextJS

Run the command: npx [1]

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

Anpm

Bnext

Cvercel

Dnode

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'next' instead of 'vercel' to deploy.

Trying to run 'npm' or 'node' for deployment.

Use npx vercel to deploy your Next.js app to Vercel easily.

2fill in blank

medium

Complete the code to import the Vercel CLI package in a Node.js script.

NextJS

import [1] from 'vercel';

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

AVercelClient

Bvercel

CVercel

Ddeploy

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Vercel' which is not the default import.

Using unrelated names like 'deploy'.

The Vercel CLI package is imported as vercel by default.

3fill in blank

hard

Fix the error in the deployment script by choosing the correct environment variable name for the Vercel token.

NextJS

const token = process.env.[1];

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

AVERCEL_TOKEN

BVERCEL_API_KEY

CAPI_TOKEN

DVERCEL_SECRET

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'VERCEL_API_KEY' which is incorrect.

Using generic names like 'API_TOKEN'.

The correct environment variable for Vercel token is VERCEL_TOKEN.

4fill in blank

hard

Fill both blanks to configure the Next.js app for Vercel deployment with the correct build command and output directory.

NextJS

{
  "builds": [
    { "src": "package.json", "use": "@vercel/[1]" }
  ],
  "outputDirectory": "[2]"
}

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

Anext

Bdist

Cbuild

Dout

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'build' instead of 'next' for the build tool.

Using 'dist' instead of 'out' for output directory.

Use @vercel/next as the build tool and out as the output directory for static export.

5fill in blank

hard

Fill all three blanks to create a Next.js API route that returns a JSON response confirming deployment.

NextJS

export default function handler(req, res) {
  res.status([1]).json({ message: '[2] deployed successfully on [3]!' });
}

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

A200

B404

CVercel

DNext.js

Attempts:

3 left

💡 Hint

Common Mistakes

Using status code 404 which means not found.

Swapping 'Next.js' and 'Vercel' in the message.

The status code 200 means success. The message uses 'Next.js' and 'Vercel' to confirm deployment.