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.

Practice

1. What is the main purpose of running npx next build in a Next.js project?

easy

A. To install all project dependencies

B. To start the development server with hot reloading

C. To generate a new Next.js project

D. To create an optimized production build of the app

Solution

1. Step 1: Understand the command purpose

   npx next build compiles the app for production, optimizing files.

2. Step 2: Compare with other commands

   next dev starts development server, npm install installs packages, npx create-next-app creates a new project.

3. Final Answer:

   To create an optimized production build of the app -> Option D

4. Quick Check:

   Build command = production build [OK]

Hint: Build command creates production files, dev command runs server [OK]

Common Mistakes:

• Confusing build with development server start
• Thinking build installs dependencies
• Mixing build with project creation

2. Which of the following is the correct command to generate a detailed build size report in Next.js?

easy

A. npx next build --profile

B. npx next build

C. npx next build --stats

D. npx next start --report

Solution

1. Step 1: Identify the command for build analysis

   Next.js npx next build generates a bundle size report.

2. Step 2: Check other options

   --profile and --stats are not valid Next.js build flags; next start runs the server, not build.

3. Final Answer:

   npx next build -> Option B

4. Quick Check:

   Build command = detailed build report [OK]

Hint: next build generates bundle sizes [OK]

Common Mistakes:

• Using start command instead of build
• Confusing profile or stats flags
• Using invalid flags like --analyze

3. Given the following Next.js build output snippet:

Page                                                           Size     First Load JS
┌ ○ /                                                          1.2 kB         45.3 kB
├   /_app                                                      0 B           44.1 kB
└ ○ /about                                                     2.3 kB         46.4 kB

What does the 'First Load JS' column represent?

medium

A. The size of CSS files loaded for that page

B. The size of the page's HTML file

C. The total JavaScript size loaded on the first visit to that page

D. The size of images loaded on that page

Solution

1. Step 1: Understand the build output columns

   The 'First Load JS' shows the JavaScript bytes downloaded when the page loads initially.

2. Step 2: Differentiate from other assets

   HTML size is separate, CSS and images are not counted in this JS size column.

3. Final Answer:

   The total JavaScript size loaded on the first visit to that page -> Option C

4. Quick Check:

   First Load JS = initial JS bytes [OK]

Hint: First Load JS means initial JavaScript bytes loaded [OK]

Common Mistakes:

• Thinking it shows HTML or CSS size
• Confusing with image sizes
• Ignoring shared JS loaded by _app

4. You run npx next build but get an error: Module not found: Can't resolve 'xyz'. What is the best way to fix this?

medium

A. Install the missing package 'xyz' using npm or yarn

B. Delete the .next folder and rebuild

C. Change the import statement to a different module

D. Ignore the error and run next start

Solution

1. Step 1: Understand the error cause

   The error means the build cannot find the module 'xyz' because it is not installed or missing.

2. Step 2: Fix by installing the missing package

   Run npm install xyz or yarn add xyz to add the dependency.

3. Final Answer:

   Install the missing package 'xyz' using npm or yarn -> Option A

4. Quick Check:

   Module not found = install missing package [OK]

Hint: Missing module error means install that package [OK]

Common Mistakes:

• Deleting build folder without fixing dependencies
• Ignoring error and starting server anyway
• Changing imports without knowing correct module

5. You notice your Next.js build output shows a very large First Load JS size for the homepage. Which approach will best reduce this size?

hard

A. Use dynamic imports to load heavy components only when needed

B. Remove the _app.js file entirely

C. Increase the server RAM to speed up build

D. Disable JavaScript in the browser

Solution

1. Step 1: Identify cause of large JS size

   Large first load JS means too much code is bundled upfront, slowing page load.

2. Step 2: Apply code splitting with dynamic imports

   Dynamic imports let Next.js load heavy components only when needed, reducing initial JS size.

3. Step 3: Evaluate other options

   Removing _app.js breaks app structure, increasing RAM doesn't reduce bundle size, disabling JS breaks app.

4. Final Answer:

   Use dynamic imports to load heavy components only when needed -> Option A

5. Quick Check:

   Dynamic imports = smaller initial JS [OK]

Hint: Split code with dynamic imports to shrink initial JS [OK]

Common Mistakes:

• Deleting _app.js which is essential
• Thinking server RAM affects bundle size
• Disabling JavaScript breaks app functionality