Vercel deployment (default) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you deploy a Next.js app with an API route on Vercel?

You have a Next.js app with a simple API route under /pages/api/hello.js. After deploying to Vercel, what will be the behavior when you visit /api/hello in the browser?

NextJS

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API!' });
}

A The browser shows a JSON response: {"message":"Hello from API!"}

B The browser shows a 404 Not Found error because API routes are not supported on Vercel.

C The browser redirects to the homepage automatically.

D The browser shows the raw JavaScript code of the API route.

💡 Hint

Think about how Vercel handles API routes in Next.js apps.

Vercel natively supports Next.js API routes. When deployed, visiting /api/hello returns the JSON response defined in the handler.

📝 Syntax

intermediate

Which environment variable syntax is correct for Vercel deployment in Next.js?

You want to use an environment variable API_KEY in your Next.js app deployed on Vercel. Which syntax correctly accesses this variable in your code?

A const apiKey = process.env.NEXT_PUBLIC_API_KEY;

B const apiKey = process.env.API_KEY;

C const apiKey = process.env.VERCEL_API_KEY;

D const apiKey = process.env.env.API_KEY;

💡 Hint

Remember how Next.js accesses environment variables on the server side.

Server-side environment variables are accessed via process.env.VARIABLE_NAME. The NEXT_PUBLIC_ prefix is for variables exposed to the browser.

🔧 Debug

advanced

Why does your Next.js app deployed on Vercel show a 500 error on a dynamic route?

You deployed a Next.js app with a dynamic route /pages/posts/[id].js. Visiting /posts/123 on Vercel returns a 500 error, but it works locally. What is the most likely cause?

A Your API route conflicts with the dynamic route causing the error.

B Vercel does not support dynamic routes in Next.js.

C You need to rename the file to <code>posts/id.js</code> for Vercel compatibility.

D You forgot to export <code>getStaticPaths</code> or <code>getServerSideProps</code> to handle dynamic routes.

💡 Hint

Think about how Next.js pre-renders dynamic pages during build or request time.

Dynamic routes require getStaticPaths for static generation or getServerSideProps for server-side rendering. Missing these causes build or runtime errors on Vercel.

❓ state_output

advanced

What is the output of this Next.js page deployed on Vercel?

Consider this Next.js page component deployed on Vercel. What will the user see when visiting this page?

NextJS

import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Count: {count}</p>;
}

A The page shows 'Count: 0' initially and increments by 1 every second.

B The page shows 'Count: 0' and never changes because useEffect does not run on Vercel.

C The page shows 'Count: 1' immediately and stays fixed.

D The page throws an error because setInterval is not allowed on Vercel.

💡 Hint

Remember how React hooks work in client-side rendering on Vercel.

The component uses useEffect to start a timer that increments the count every second. This runs on the client side after hydration, so the count updates as expected.

🧠 Conceptual

expert

How does Vercel handle serverless functions in Next.js API routes during deployment?

When you deploy a Next.js app with API routes to Vercel, how are these API routes executed behind the scenes?

A All API routes are bundled into a single server process that runs continuously.

B API routes are converted into static JSON files served directly by the CDN.

C Each API route is deployed as an independent serverless function that runs on demand.

D API routes are ignored during deployment and only work locally.

💡 Hint

Think about how serverless platforms like Vercel run backend code.

Vercel deploys each Next.js API route as a separate serverless function. These functions start on demand when a request comes in, scaling automatically.