Next.js Made Easy: An Intro Quiz on Core Features Quiz

1. What Next.js Provides Out of the Box

   Which statement best describes Next.js for a beginner who wants routing and pre-rendering without manual setup?

   1. A web framework that adds file-based routing, server-side rendering, and static generation out of the box
   2. A database engine for storing documents
   3. A CSS-only toolkit for styling pages
   4. A browser extension for blocking ads
   5. A desktop app for image editing

2. Home Route Mapping with the Pages Directory

   In the pages router, which file path renders the home page at the / URL?

   1. pages/index.js
   2. pages/home.jsx
   3. src/home/index.ts
   4. routes/root.js
   5. app/main/page.js

3. Dynamic Routes Syntax (Pages Router)

   If you want a page to handle any post ID like /posts/123 using the pages router, which file should you create?

   1. pages/posts/[id].js
   2. pages/posts/{id}.js
   3. pages/posts/(id).js
   4. pages/posts/[id]/index.css
   5. pages/[posts]/id.js

4. Server-Side Rendering at Request Time

   Which function runs on the server at request time to fetch data for a page in the pages router?

   1. getServerSideProps
   2. getStaticProps
   3. getInitialStaticProps
   4. fetchServerProps
   5. getServerSideProp

5. Static Generation at Build Time

   Which function lets a page fetch data at build time for static generation in the pages router?

   1. getStaticProps
   2. getBuildProps
   3. generateStaticProps
   4. getStaticProp
   5. useStaticProps

6. Creating an API Route

   Where should you place a file to create an API endpoint that responds at /api/hello in the pages router?

   1. pages/api/hello.js
   2. api/pages/hello.js
   3. pages/endpoints/hello.js
   4. server/api/hello.ts
   5. app/api/hello/page.js

7. Optimized Images Component

   Which built-in component should you use to get automatic image optimization, such as resizing and lazy loading, for a picture located at /public/photo.jpg?

   1. Image
   2. Img
   3. nextImage
   4. Picture
   5. OptimizedImg

8. Client-Side Navigation Component

   When building a navigation menu, which component enables client-side navigation between pages without a full reload?

   1. Link
   2. Anchor
   3. Navigate
   4. RouterLink
   5. HyperLink

9. Environment Variables Exposed to the Browser

   You need to expose an environment variable to browser code; which prefix must the variable name start with?

   1. NEXT_PUBLIC_
   2. PUBLIC_NEXT_
   3. BROWSER_
   4. CLIENT_
   5. PUBLIC_

10. Link Prefetching Behavior

    In production builds, what typically happens when a visible Link points to /about and prefetching is enabled?

    1. The code for the /about page is prefetched in the background to speed up navigation
    2. A full page reload immediately navigates to /about
    3. The entire site is downloaded and cached offline
    4. The link is disabled until the user double-clicks it
    5. The server is restarted to compile the /about page