API routes vs server actions decision in NextJS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Next.js API route handler.

NextJS

export default function handler(req, res) {
  if (req.method === '[1]') {
    res.status(200).json({ message: 'Hello from API route' });
  } else {
    res.status(405).end();
  }
}

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

ADELETE

BGET

CPUT

DPOST

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET causes the handler to reject the request.

Not checking the method leads to unexpected behavior.

The API route checks if the request method is GET to respond properly.

2fill in blank

medium

Complete the code to define a server action in Next.js.

NextJS

import { cookies } from 'next/headers';

export async function [1](formData) {
  'use server';
  const cookieStore = cookies();
  // process formData
  return { success: true };
}

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

AhandleSubmit

BsubmitForm

Caction

DserverAction

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the function something other than 'action' can cause confusion.

Forgetting 'use server' disables server action behavior.

Server actions in Next.js are exported functions often named action to be used in forms.

3fill in blank

hard

Fix the error in the API route to correctly parse JSON body.

NextJS

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const data = await req.[1]();
    res.status(200).json({ received: data });
  } else {
    res.status(405).end();
  }
}

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

Ajson

Bbody

Ctext

Dparse

Attempts:

3 left

💡 Hint

Common Mistakes

Using req.body directly in Next.js API routes causes undefined errors.

Using req.text() returns raw string, not parsed JSON.

To parse JSON body in Next.js API routes, use await req.json().

4fill in blank

hard

Fill both blanks to create a server action that updates cookies and returns a message.

NextJS

import { cookies } from 'next/headers';

export async function [1](formData) {
  'use server';
  const cookieStore = [2]();
  cookieStore.set('user', formData.get('username'));
  return { message: 'Cookie set' };
}

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

Aaction

Bcookies

CcookieStore

DsetCookie

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong function names for server actions.

Confusing the cookie store variable with the function to get cookies.

The server action is named action and uses cookies() to access cookies.

5fill in blank

hard

Fill all three blanks to create an API route that handles POST requests and returns JSON.

NextJS

export default async function handler(req, res) {
  if (req.method === '[1]') {
    const data = await req.[2]();
    res.status(200).json({ message: data.[3] });
  } else {
    res.status(405).end();
  }
}

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

APOST

Bjson

Ctext

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST in the method check.

Using req.text() instead of req.json() causes parsing errors.

Accessing a wrong property name from the data object.

The API route accepts POST requests, parses JSON body with req.json(), and returns the name property from the data.

Practice

1. What is the main difference between Next.js API routes and server actions?

easy

A. API routes and server actions are exactly the same in Next.js.

B. API routes run only on the client; server actions run only on the server.

C. API routes create separate endpoints; server actions call server code directly from components.

D. API routes are used for styling; server actions handle routing.

Solution

1. Step 1: Understand API routes purpose

   API routes create separate API endpoints that the client can call to communicate with the server.

2. Step 2: Understand server actions purpose

   Server actions allow calling server code directly from React components without creating separate endpoints.

3. Final Answer:

   API routes create separate endpoints; server actions call server code directly from components. -> Option C

4. Quick Check:

   API routes vs server actions difference = D [OK]

Hint: API routes = endpoints; server actions = direct calls [OK]

Common Mistakes:

• Thinking API routes run on client side
• Confusing server actions with styling or routing
• Believing API routes and server actions are identical

2. Which of the following is the correct way to define a server action in Next.js?

easy

A. export default function handler(req, res) { /* server code */ }

B. export async function actionName() { /* server code */ }

C. function actionName() { return Server Action }

D. const actionName = () => fetch('/api/data')

Solution

1. Step 1: Identify server action syntax

   Server actions are defined as exported async functions that run on the server.

2. Step 2: Compare with API route syntax

   API routes use a default export function with (req, res) parameters, not named async functions.

3. Final Answer:

   export async function actionName() { /* server code */ } -> Option B

4. Quick Check:

   Server action syntax = B [OK]

Hint: Server actions use named async functions exported directly [OK]

Common Mistakes:

• Using default export with req, res (API route style)
• Writing server actions as React components
• Calling fetch inside server action definition

3. Given this Next.js server action code, what will be the output when called from a component?

export async function addNumbers(a, b) {
  return a + b;
}

medium

A. Returns a Promise resolving to the sum of a and b.

B. Returns undefined because server actions cannot return values.

C. Throws a syntax error due to missing parameters.

D. Returns a string concatenation of a and b.

Solution

1. Step 1: Analyze the server action function

   The function is async and returns the sum of a and b, which is a number.

2. Step 2: Understand async function return

   Async functions return a Promise that resolves to the returned value, here the sum.

3. Final Answer:

   Returns a Promise resolving to the sum of a and b. -> Option A

4. Quick Check:

   Async function returns Promise with sum = A [OK]

Hint: Async server actions return Promises with results [OK]

Common Mistakes:

• Thinking server actions cannot return values
• Confusing number addition with string concatenation
• Assuming syntax error due to parameters

4. You wrote this API route in Next.js but it throws an error:

export async function handler(req, res) {
  res.status(200).json({ message: 'Hello' });
}

What is the error and how to fix it?

medium

A. Response method json is invalid; use send instead.

B. Should use server action syntax instead of API route syntax.

C. Function must not be async in API routes.

D. Missing default export; change to export default async function handler(req, res).

Solution

1. Step 1: Identify API route export requirement

   API routes require a default export function to handle requests.

2. Step 2: Fix export statement

   Change named export to default export: export default async function handler(req, res).

3. Final Answer:

   Missing default export; change to export default async function handler(req, res). -> Option D

4. Quick Check:

   API route default export required = C [OK]

Hint: API routes need default export function [OK]

Common Mistakes:

• Using named export instead of default export
• Confusing API routes with server actions syntax
• Incorrect response method usage

5. You want to build a Next.js app that needs a public API for multiple clients and also some simple server logic tightly integrated with components. Which approach should you choose?

hard

A. Use API routes for the public API and server actions for simple server logic inside components.

B. Use only server actions for everything to keep code simple.

C. Use only API routes for all server logic to avoid confusion.

D. Use client-side fetching only; avoid server code.

Solution

1. Step 1: Analyze app needs

   The app requires a public API accessible by multiple clients and simple server logic integrated with components.

2. Step 2: Match features to approaches

   API routes are best for broad public APIs; server actions are ideal for simple, direct server calls from components.

3. Final Answer:

   Use API routes for the public API and server actions for simple server logic inside components. -> Option A

4. Quick Check:

   Public API + integrated logic = A [OK]

Hint: Public API = API routes; simple logic = server actions [OK]

Common Mistakes:

• Using only server actions for public APIs
• Using only API routes for simple component logic
• Avoiding server code when needed