Build output analysis in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js Image component.

NextJS

import [1] from 'next/image';

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

Aimg

BImage

CPicture

DNextImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'img' instead of 'Image'.

Trying to import a non-existent component like 'Picture'.

The Next.js Image component is imported as Image from 'next/image'.

2fill in blank

medium

Complete the code to export a Next.js page component as default.

NextJS

export default function [1]() { return <div>Hello</div>; }

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

AHome

BComponent

CApp

DPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names like 'Component' which are less descriptive.

Using lowercase function names which is not standard.

By convention, Next.js page components are often named Home or relevant to the page. Here, Home is used.

3fill in blank

hard

Fix the error in the Next.js page component export statement.

NextJS

export [1] function Home() { return <main>Welcome</main>; }

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

Alet

Bconst

Cdefault

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable declarations like 'const' or 'let' instead of 'default'.

Omitting the export keyword entirely.

Next.js pages must be exported as default exports. Adding default fixes the error.

4fill in blank

hard

Fill both blanks to create a Next.js API route handler that sends a JSON response.

NextJS

export default function handler(req, res) { res.[1]({ message: '[2]' }); }

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

Ajson

Bsend

CHello from API

DHello World

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.send() which sends plain text, not JSON.

Using incorrect message strings.

The res.json() method sends a JSON response. The message string is 'Hello World'.

5fill in blank

hard

Fill all three blanks to create a Next.js page that fetches data server-side and displays it.

NextJS

export async function [1]() { const res = await fetch('[2]'); const data = await res.[3](); return { props: { data } }; }

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

AgetServerSideProps

BgetStaticProps

Cjson

Dhttps://api.example.com/data

Attempts:

3 left

💡 Hint

Common Mistakes

Using getStaticProps which runs at build time instead of server-side.

Parsing response with incorrect method like res.text().

getServerSideProps fetches data at request time. The URL is 'https://api.example.com/data'. The response is parsed as JSON with res.json().

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