Skip to content
QuiznExam

Next.js API Routes & Server Actions Quiz – 20 Questions with Answers

Test your Next.js knowledge with 20 questions covering API Routes, Route Handlers, Server Actions, HTTP methods, request and response handling, server-side execution, form actions, validation, and secure data mutations.

20
Questions
15 min
Time limit
Medium
Difficulty

No sign-up needed · Last updated:

Save your score

At least 8 characters.

Forgot password?

Related quizzes

All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open

  1. 1. In the Next.js App Router, which file is used to define a Route Handler?

    • A. route.ts
    • B. api.ts
    • C. handler.ts
    • D. server.ts
    Show answer

    A. route.ts

    In the App Router, a route.ts or route.js file is used to define Route Handlers for handling HTTP requests.

  2. 2. Where are Route Handlers typically placed when creating an API endpoint with the Next.js App Router?

    • A. Inside an app directory route segment
    • B. Only inside the public directory
    • C. Only inside the pages directory
    • D. Inside the node_modules directory
    Show answer

    A. Inside an app directory route segment

    App Router Route Handlers are defined in route.ts or route.js files within the app directory structure.

  3. 3. Which HTTP methods can a Next.js App Router Route Handler export?

    • A. GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS
    • B. Only GET and POST
    • C. Only PUT and DELETE
    • D. Only GET
    Show answer

    A. GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS

    Route Handlers support standard HTTP methods through named exports such as GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS.

  4. 4. Which function is commonly used in a Next.js Route Handler to create a response?

    • A. NextResponse.json()
    • B. NextAPI.send()
    • C. Response.send()
    • D. ServerResponse.json()
    Show answer

    A. NextResponse.json()

    NextResponse.json() is a commonly used Next.js API for returning JSON responses from Route Handlers.

  5. 5. Which Web API type is commonly used as the parameter of a Next.js Route Handler?

    • A. Request
    • B. HttpRequest
    • C. NextRequestOnly
    • D. ApiRequest
    Show answer

    A. Request

    Route Handlers can receive the standard Web Request object. NextRequest can also be used when Next.js-specific request functionality is needed.

  6. 6. What is the main purpose of a Server Action in Next.js?

    • A. To execute server-side functions in response to client interactions
    • B. To replace CSS files
    • C. To create static image assets
    • D. To define browser-only Web APIs
    Show answer

    A. To execute server-side functions in response to client interactions

    Server Actions allow server-side functions to be invoked from supported client interactions, such as form submissions.

  7. 7. Which directive marks a function or module for use with Next.js Server Actions?

    • A. use server
    • B. use action
    • C. server action
    • D. use backend
    Show answer

    A. use server

    The 'use server' directive identifies server-side code that can contain Server Actions.

  8. 8. Where can a Server Action be defined using the 'use server' directive?

    • A. Inside a Server Component or in a dedicated module
    • B. Only inside a CSS file
    • C. Only inside public JavaScript files
    • D. Only inside middleware.ts
    Show answer

    A. Inside a Server Component or in a dedicated module

    Server Actions can be defined in Server Components or exported from a dedicated module using the 'use server' directive.

  9. 9. Which HTML form feature can be used to invoke a Server Action in Next.js?

    • A. The action attribute
    • B. The server attribute
    • C. The api attribute
    • D. The handler attribute
    Show answer

    A. The action attribute

    A Server Action can be passed to a form's action prop, allowing the action to run when the form is submitted.

  10. 10. What is a key difference between a Route Handler and a Server Action?

    • A. A Route Handler exposes an HTTP endpoint, while a Server Action is a server-side function invoked through supported React/Next.js mechanisms
    • B. A Server Action can only return CSS
    • C. A Route Handler can never access request data
    • D. They are exactly the same feature
    Show answer

    A. A Route Handler exposes an HTTP endpoint, while a Server Action is a server-side function invoked through supported React/Next.js mechanisms

    Route Handlers are designed around HTTP requests and responses, while Server Actions provide a mechanism for invoking server-side functions, commonly for mutations.

  11. 11. Which HTTP method is commonly used by a Route Handler to create or submit new data?

    • A. POST
    • B. GET
    • C. HEAD
    • D. OPTIONS
    Show answer

    A. POST

    POST is commonly used when a client submits data to create a new resource or perform a server-side operation.

  12. 12. How can a POST Route Handler read a JSON request body?

    • A. await request.json()
    • B. request.bodyJSON()
    • C. request.getJSON()
    • D. await request.parseBody()
    Show answer

    A. await request.json()

    The Web Request API provides the asynchronous json() method for reading a JSON request body.

  13. 13. Which object can be used to read form data submitted to a Server Action?

    • A. FormData
    • B. FormRequest
    • C. ActionData
    • D. ServerForm
    Show answer

    A. FormData

    A Server Action used as a form action can receive the submitted fields through the standard FormData object.

  14. 14. Why should authorization checks still be performed inside Server Actions?

    • A. Server Actions can be invoked through requests and should not trust the caller automatically
    • B. Authorization is automatically impossible in Next.js
    • C. Server Actions cannot access user information
    • D. Authorization only applies to CSS files
    Show answer

    A. Server Actions can be invoked through requests and should not trust the caller automatically

    Server-side mutations should verify authentication and authorization on the server rather than relying solely on client-side restrictions.

  15. 15. Which statement about Server Actions is correct?

    • A. They are intended for server-side operations such as data mutations
    • B. They can only manipulate browser DOM elements
    • C. They are always executed entirely in the browser
    • D. They are CSS event handlers
    Show answer

    A. They are intended for server-side operations such as data mutations

    Server Actions provide a convenient way to perform server-side operations, particularly mutations such as creating, updating, or deleting data.

  16. 16. What does a dynamic route segment such as [id] allow in a Next.js API Route Handler path?

    • A. It allows the route to receive a dynamic path parameter
    • B. It disables routing
    • C. It creates a static CSS class
    • D. It automatically creates a database table
    Show answer

    A. It allows the route to receive a dynamic path parameter

    A dynamic segment such as [id] can capture part of the URL and make the value available to the Route Handler.

  17. 17. Which HTTP method is generally used to retrieve data without intending to modify the resource?

    • A. GET
    • B. POST
    • C. DELETE
    • D. PATCH
    Show answer

    A. GET

    GET is conventionally used to request or retrieve representations of resources without intending to modify server state.

  18. 18. Which Next.js feature can be used to revalidate cached data after a Server Action changes it?

    • A. revalidatePath()
    • B. refreshCacheOnly()
    • C. clearRoute()
    • D. reloadData()
    Show answer

    A. revalidatePath()

    revalidatePath() can be used in supported server-side contexts to invalidate cached data associated with a specified route path.

  19. 19. Which statement best describes the security responsibility when using Server Actions?

    • A. Sensitive operations should validate authentication, authorization, and input on the server
    • B. Client-side validation is always sufficient
    • C. Server Actions automatically make every operation public
    • D. Input validation is unnecessary because Server Actions are server-side
    Show answer

    A. Sensitive operations should validate authentication, authorization, and input on the server

    Server-side code should independently validate incoming data and enforce authentication and authorization for protected operations.

  20. 20. Which approach is generally appropriate when an external client needs a conventional HTTP API endpoint?

    • A. Use a Route Handler
    • B. Use only a Server Action
    • C. Use a React state variable
    • D. Use a CSS module
    Show answer

    A. Use a Route Handler

    Route Handlers are designed to expose HTTP endpoints, making them suitable when clients or systems need to communicate through conventional HTTP requests.