Next js basics
Next js Routing
Next js Data Fetching
Next js Rendering
Next js Styling
Next js Optimizing
Next js Configuring
Next js Deploying
Next js Components
Next js File Conventions
Next js Functions
Courses
  • Full Stack Dev CourseExplore

    • Image & Assets Next.js Quiz

    Last Updated :
    Discuss
    Comments

    Question 1

    When using the Next.js 'Image' component with a remote URL, which of the following is a mandatory step to avoid errors?

    • A

      Wrapping the 'Image' component in a 'div' with 'position: relative'

    • B

      Using the 'loader' prop with a custom function

    • C

      Adding the 'remote' property to the 'Image' component

    • D

      Configuring the remote domain in 'next.config.js'

    Question 2

    For a locally stored image, when can you omit the 'width' and 'height' props on the 'Image' component?

    • A

      When you statically import the image file

    • B

      When the image is in the 'public' folder and referenced with a static path

    • C

      When the 'layout' is set to 'fill'

    • D

      When the image is an SVG file

    Question 3

    If you set the 'layout' prop to 'fill', what CSS property is required on the parent element of the 'Image' component?

    • A

      'display: flex'

    • B

      'aspect-ratio: 1'

    • C

      'position: relative'

    • D

      'overflow: hidden'

    Question 4

    Which of the following is NOT a direct benefit of Next.js's built-in image optimization?

    • A

      Automatic image resizing for different viewports

    • B

      Automatic alt text generation for images

    • C

      Improved Core Web Vitals

    • D

      Automatic conversion to modern image formats like WebP

    Question 5

    To add a favicon to a Next.js static site, the simplest method that requires no code changes is to place the 'favicon.ico' file in which directory?

    • A

      The 'public' directory

    • B

      The 'styles' directory

    • C

      The 'src' directory

    • D

      The 'pages' directory

    Question 6

    If you want to add a favicon with a custom file name (e.g., 'my-icon.png'), what is the correct way to link it in your Next.js application?

    • A

      import Head from 'next/head';

    • B

      Place 'my-icon.png' in the 'public' folder and rename it to 'favicon.ico'

    • C

      import Image from 'next/image';

    • D

      In 'next.config.js', add: images: { favicon: '/my-icon.png' }

    Question 7

    When is it appropriate to use the 'unoptimized' prop on the Next.js 'Image' component?

    • A

      When you are using a local image that is smaller than 10KB

    • B

      When you want to serve an image from a remote URL

    • C

      When you want to serve the original, unmodified image

    • D

      When you are using an SVG image

    Question 8

    Which 'layout' prop value makes the 'Image' component scale up and down with the viewport width, while maintaining its aspect ratio?

    • A

      fill

    • B

      intrinsic

    • C

      responsive

    • D

      fixed

    Question 9

    To use a custom image loader function, you can define it in 'next.config.js' or pass it directly to the 'Image' component's 'loader' prop. Which approach takes precedence?

    • A

      It depends on the order they are defined in

    • B

      Neither, you can only use one approach at a time

    • C

      The loader defined in 'next.config.js'

    • D

      The loader passed to the 'loader' prop

    Question 10

    Why is it recommended to use the Next.js 'Image' component over the standard '' tag?

    • A

      Because it automatically provides lazy loading, responsive images, and other performance optimizations

    • B

      Because it's easier to style with CSS-in-JS

    • C

      Because it supports more image formats

    • D

      Because it has better accessibility features

    Tags:
    Next.js

    There are 10 questions to complete.

    Take a part in the ongoing discussion