TypeScript support in Next.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js TypeScript component?

Consider this Next.js functional component written in TypeScript. What will it render on the page?

NextJS

import React from 'react';

interface GreetingProps {
  name: string;
  age?: number;
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <p>Hello, {name}!</p>
      {age !== undefined && <p>You are {age} years old.</p>}
    </div>
  );
};

export default function Page() {
  return <Greeting name="Alice" />;
}

A Component throws a TypeScript error because age is missing

B <div><p>Hello, Alice!</p><p>You are undefined years old.</p></div>

C <div><p>Hello, Alice!</p></div>

D <div><p>Hello, Alice!</p><p>You are 0 years old.</p></div>

💡 Hint

Check how optional props work in TypeScript and React.

The age prop is optional. Since it is not passed, the condition {age && ...} evaluates to false, so the age paragraph is not rendered. The component renders only the greeting with the name.

📝 Syntax

intermediate

Which option correctly defines a Next.js API route handler in TypeScript?

You want to create a Next.js API route with TypeScript that returns JSON { message: 'Hello' }. Which code snippet is correct?

A

import { NextApiRequest, NextApiResponse } from 'next';

export default (req: NextApiRequest, res: NextApiResponse) => {
  res.send({ message: 'Hello' });
}

B

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

C

import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse): string {
  return JSON.stringify({ message: 'Hello' });
}

D

import type { NextApiRequest, NextApiResponse } from 'next';

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

💡 Hint

Check the correct import and response method for Next.js API routes in TypeScript.

Option D correctly imports the types and uses res.status(200).json() to send JSON. Option D lacks types. Option D uses res.send which is not recommended. Option D incorrectly returns a string instead of sending a response.

🔧 Debug

advanced

Why does this Next.js TypeScript page cause a type error?

Examine this Next.js page component. Why does it cause a TypeScript error?

NextJS

import { GetStaticProps } from 'next';

interface Props {
  count: number;
}

export default function Counter({ count }: Props) {
  return <p>Count: {count}</p>;
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  return {
    props: {
      count: 10
    }
  };
};

A Type error because Counter component is missing React.FC type annotation

B No error, the code is valid and runs correctly

C Type error because getStaticProps must return a Promise, but it returns an object

D Type error because count is declared as number but getStaticProps returns it as string

💡 Hint

Check the type of count in props vs the value returned from getStaticProps.

The count prop is typed as number, and getStaticProps returns it as a number 10. This is correct and causes no TypeScript error.

❓ state_output

advanced

What is the output of this Next.js TypeScript component with useState?

Look at this Next.js component using TypeScript and React hooks. What will it display after clicking the button once?

NextJS

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

A Count: 1

B Count: 0

C Count: NaN

D Type error because useState is missing generic type

💡 Hint

Think about how useState updates state and the initial value type.

The initial count is 0. Clicking the button calls setCount(count + 1), updating count to 1, which is displayed.

🧠 Conceptual

expert

Which statement about TypeScript support in Next.js is TRUE?

Select the correct statement about how Next.js supports TypeScript out of the options below.

A Next.js automatically creates a default tsconfig.json on first TypeScript file detection

B Next.js requires manual configuration of tsconfig.json before using TypeScript

C Next.js does not support incremental static regeneration with TypeScript

D Next.js only supports TypeScript in API routes, not in pages or components

💡 Hint

Think about how Next.js handles TypeScript setup for beginners.

Next.js automatically generates a default tsconfig.json file when it detects a TypeScript file for the first time, simplifying setup.