Build output analysis in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the output of this Next.js Server Component?

Consider this Next.js Server Component code snippet. What will it render on the page?

NextJS

export default function Greeting() {
  const hour = new Date().getHours();
  return (
    <main>
      <h1>{hour < 12 ? 'Good morning' : 'Good afternoon'}</h1>
    </main>
  );
}

A <main><h1>Good evening</h1></main> regardless of the time

B <main><h1>Good night</h1></main> regardless of the time

C An error because Server Components cannot use Date()

D <main><h1>Good morning</h1></main> if current hour is before 12, otherwise <main><h1>Good afternoon</h1></main>

💡 Hint

Think about when Server Components run and what JavaScript features they can use.

Server Components run on the server and can use standard JavaScript like Date(). The component returns 'Good morning' if the hour is before 12, otherwise 'Good afternoon'.

❓ state_output

intermediate

What is the rendered output after clicking the button twice in this React component?

Given this React functional component using hooks, what will be the displayed count after clicking the button two times?

NextJS

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment Twice</button>
    </div>
  );
}

A Count: 0

B Count: 1

C Count: 2

D Count: NaN

💡 Hint

Remember how React batches state updates and how the current state value is captured in closures.

Both setCount calls use the same stale count value (0), so the count only increments once to 1 after the button click.

📝 Syntax

advanced

Which option correctly imports and uses a Next.js dynamic component with suspense?

Next.js supports dynamic imports with React suspense. Which code snippet correctly implements this?

A

import dynamic from 'next/dynamic';
const DynamicComp = dynamic(() => import('./Comp'), { suspense: true });
export default function Page() {
  return <React.Suspense fallback={<p>Loading...</p>}><DynamicComp /></React.Suspense>;
}

B

import dynamic from 'next/dynamic';
const DynamicComp = dynamic(() => import('./Comp'), { loading: () => <p>Loading...</p> });
export default function Page() {
  return <DynamicComp />;
}

C

import dynamic from 'next/dynamic';
const DynamicComp = dynamic(() => import('./Comp'), { suspense: false });
export default function Page() {
  return <DynamicComp />;
}

D

import dynamic from 'next/dynamic';
const DynamicComp = dynamic(() => import('./Comp'));
export default function Page() {
  return <React.Suspense fallback={<p>Loading...</p>}><DynamicComp /></React.Suspense>;
}

💡 Hint

Check how suspense option and React.Suspense wrapper are used together.

Option A correctly enables suspense in dynamic import and wraps the component in React.Suspense with a fallback.

🔧 Debug

advanced

Why does this Next.js page fail to build with this error: "Error: You should not use 'use client' in a Server Component"?

Examine the code below. Why does the build fail with the given error?

NextJS

'use client';

import React from 'react';

export default function Page() {
  return <h1>Hello from Server Component</h1>;
}

A Because the component returns plain HTML instead of JSX

B Because 'use client' is missing and the component uses client hooks

C Because 'use client' directive is present but the component does not use any client-only features

D Because the component imports React but does not export default

💡 Hint

Think about what 'use client' means and when it should be used.

The 'use client' directive marks a component as client-side. If the component does not use client features, Next.js expects it to be a Server Component and fails the build.

🧠 Conceptual

expert

What is the primary reason Next.js splits code into separate chunks during build?

Why does Next.js create multiple JavaScript chunks instead of one big file in the build output?

A To improve page load performance by loading only necessary code per page

B To make the build process faster by splitting files arbitrarily

C To reduce server memory usage by limiting file sizes

D To avoid using React features that require a single bundle

💡 Hint

Think about user experience and network efficiency.

Splitting code into chunks allows Next.js to load only the code needed for the current page, speeding up load times and reducing bandwidth.