Essential Next.js Fundamentals Quiz (2025 Edition) Quiz

Challenge your understanding of core Next.js concepts and features with these beginner-friendly questions covering key topics like file-based routing, data fetching, rendering methods, and important updates in Next.js 13. This quiz is designed for anyone preparing for JavaScript and web development interviews, ensuring solid foundational knowledge about the Next.js framework.

1. Understanding Next.js

   Which statement best describes Next.js in relation to React?

   1. Next.js is a framework built on top of React for production-ready web applications.
   2. Next.js is a programming language used instead of React.
   3. Next.js is a CSS library for React components.
   4. Next.js is a database specifically for React apps.

   Explanation: Next.js extends React by providing additional features like server-side rendering, routing, and API routes to create production-ready applications. It is not a programming language, so the second option is incorrect. Next.js does not focus on styling like CSS libraries, nor is it a database technology, making the third and fourth answers inappropriate.

2. File-Based Routing

   How does Next.js mainly handle routing between pages?

   1. By matching file names in the 'pages' directory to URLs.
   2. By writing custom route configuration files.
   3. Through a manually updated routes list in a JSON file.
   4. By using a .router.js file for all route definitions.

   Explanation: Next.js uses a file-based routing convention where each file inside the 'pages' directory automatically becomes a route. Manually writing configuration or maintaining routes in JSON or .router.js files is not typical in Next.js, differentiating it from other approaches.

3. Dynamic Routing

   What file name would you use to create a dynamic route for a blog post with a variable ID in Next.js?

   1. [id].js
   2. blogId.js
   3. dynamic.js
   4. [blog]/id.js

   Explanation: A file named '[id].js' allows Next.js to create dynamic routes where 'id' is a parameter. Writing 'blogId.js' or 'dynamic.js' makes static routes, not dynamic ones. '[blog]/id.js' is not a valid Next.js dynamic route filename.

4. App Structure

   What is the primary role of the _app.js (or _app.tsx) file in a Next.js project?

   1. To initialize pages and inject global styles or layouts.
   2. To define custom API routes.
   3. To control 404 error pages.
   4. To serve as the root HTML template.

   Explanation: The _app.js file wraps every page, making it suitable for global setups like styles or providers. It does not deal with API routes or error pages, and root HTML templates are handled in _document.js instead.

5. Pre-rendering Explained

   What is the main advantage of pre-rendering in Next.js?

   1. Pages are generated as HTML before a request, improving performance and SEO.
   2. Pre-rendering deletes unused files.
   3. It adds support for CSS variables.
   4. Pages are hidden from search engines.

   Explanation: Pre-rendering creates HTML in advance, which boosts performance and search engine optimization. The other options do not describe pre-rendering; deleting files, handling CSS variables, or hiding content from search engines are unmanaged by pre-rendering.

6. API Routes

   What is one main use of API routes in Next.js?

   1. Handling server-side logic like form submissions without a separate backend.
   2. Storing user authentication tokens on the client.
   3. Styling components with CSS.
   4. Generating static images from SVG.

   Explanation: API routes are meant for backend-like tasks such as processing forms or handling logic on the server within a Next.js project. They are not used for styling, token storage, or image generation, which are managed differently.

7. getStaticProps Usage

   When would you use getStaticProps in Next.js?

   1. To fetch data at build time for static site generation.
   2. To handle user authentication on the client side.
   3. To optimize WebAssembly imports.
   4. To manage real-time data updates.

   Explanation: getStaticProps is used for fetching data at build time and generating static pages; it is not related to authentication, WebAssembly, or real-time updates.

8. Data Fetching Comparison

   What is the key difference between getServerSideProps and getStaticProps in Next.js?

   1. getServerSideProps runs at every request, while getStaticProps runs at build time.
   2. Both run only on the client side.
   3. getStaticProps supports only dynamic routes.
   4. getServerSideProps can only be used in API routes.

   Explanation: getServerSideProps fetches data for each incoming request, ensuring the latest content. getStaticProps works only during build time, serving pre-generated data. The other options are incorrect regarding usage and limitations.

9. 404 Error Handling

   How can you customize the 404 page in a Next.js app?

   1. By creating a file named 404.js inside the 'pages' directory.
   2. By editing the _app.js file directly.
   3. By placing a 404.html in the public folder.
   4. By modifying next.config.js.

   Explanation: A custom 404.js file in the 'pages' directory allows you to design a unique Not Found page. Editing _app.js, using public/404.html, or changing next.config.js does not customize the 404 route.

10. next/link Usage

    What is the main purpose of the next/link component in Next.js?

    1. To enable client-side navigation between pages without reloading.
    2. To import global CSS files.
    3. To connect Next.js to a database.
    4. To manage HTML canvas elements.

    Explanation: next/link provides client-side transitions so users can move between pages quickly. It does not handle CSS, databases, or canvas elements.

11. Static vs. Server Rendering

    If you have a news website with content that changes hourly, which Next.js rendering method suits best?

    1. Server-Side Rendering (SSR)
    2. Static Site Generation (SSG) only
    3. Client-side only with useEffect
    4. No rendering required

    Explanation: SSR is a good fit when content changes often, as pages are generated per request. SSG alone doesn't update frequently, useEffect client-only may not be SEO-friendly, and saying no rendering is needed is incorrect.

12. Incremental Static Regeneration

    What feature in Next.js allows static pages to update after deployment without a full rebuild?

    1. Incremental Static Regeneration (ISR)
    2. Sass integration
    3. TypeScript support
    4. Real-time database

    Explanation: ISR lets you update static pages on-the-fly by specifying revalidation intervals, making it flexible. Sass and TypeScript are unrelated features, and real-time databases are not built into Next.js.

13. Image Optimization

    Which built-in Next.js component helps with automatic image optimization?

    1. Image
    2. imgOptimize
    3. PictureBox
    4. PicComp

    Explanation: The 'Image' component provides automatic image optimization including resizing and lazy loading. 'imgOptimize', 'PictureBox', and 'PicComp' are not Next.js components and do not offer such functionality.

14. React Server Components

    What is the role of React Server Components in Next.js 13's app/ directory?

    1. They allow some components to be rendered on the server for improved performance.
    2. They enforce all components to run on the client.
    3. They replace all API routes.
    4. They provide new database connectors.

    Explanation: React Server Components enable Next.js 13 apps to offload certain rendering to the server, reducing bundle size and improving load times. They do not force client-side rendering, nor do they affect API routes or databases directly.

15. App Router vs. Pages Directory

    In Next.js 13, what is the main difference between the pages/ and app/ directories?

    1. The app/ directory uses the new App Router, supporting server components and improved layouts.
    2. The pages/ directory is exclusive to TypeScript projects.
    3. The app/ directory cannot use middleware.
    4. The pages/ directory only supports static HTML files.

    Explanation: The app/ directory introduces the App Router, server components, and advanced layouts. The other statements regarding file types, TypeScript exclusivity, and middleware usage are incorrect.

16. Shallow Routing Use

    How does shallow routing in Next.js help during navigation?

    1. It updates the URL without running data fetching methods again.
    2. It prevents any navigation between pages.
    3. It forces a full page reload every time.
    4. It disables all forms on the page.

    Explanation: Shallow routing modifies the URL while keeping the current state without re-fetching data. Preventing navigation, reloading the page, or disabling forms are not the purpose of shallow routing.

17. Custom Error Pages

    To display a custom 500 error page in Next.js, which file should you create?

    1. 500.js
    2. _error.js
    3. error500.js
    4. error.js

    Explanation: A custom 500.js in the 'pages' directory is used for server error pages. '_error.js' handles general errors, but 500.js is specifically for server errors. 'error500.js' and 'error.js' are not standard Next.js filenames for this purpose.

18. Passing Query Parameters

    How do you typically pass query parameters in Next.js routes?

    1. By including them in the URL (e.g., /search?term=nextjs)
    2. By writing them in a .env file
    3. By configuring them in next.config.js
    4. By placing them in the public folder

    Explanation: Query parameters are commonly passed via the URL for routes, which Next.js can access in the router. .env files, next.config.js, and the public folder do not handle route query parameters.

19. Static Asset Serving

    Where should you place static files, such as images or text files, to serve them publicly in a Next.js app?

    1. In the public folder
    2. In the styles folder
    3. Inside the API directory
    4. In next.config.js

    Explanation: The public folder is meant for static assets in Next.js, making them accessible via URL paths. The styles folder is for CSS, API is for backend logic, and next.config.js is for configuration.

20. Custom Document Usage

    What is the primary use-case for the _document.js file in Next.js?

    1. To customize the HTML document structure, such as adding meta tags or setting lang attributes.
    2. To fetch data for pre-rendering.
    3. To create API endpoints.
    4. To define client-side navigation.

    Explanation: _document.js allows customization of the root HTML structure, such as adding meta tags or attributes. It does not handle data fetching, API creation, or navigation logic.

21. Using next/head

    How do you add custom meta tags to your Next.js pages for SEO purposes?

    1. By using the next/head component inside a page
    2. By placing meta tags in _app.js
    3. By editing next.config.js
    4. By using the Image component

    Explanation: The next/head component adds elements to the HTML head section, such as title or meta tags for SEO. While _app.js provides structure, next.config.js and Image do not handle meta tags.