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.

Practice

1. What happens when you add a tsconfig.json file to a new Next.js project?

easy

A. You must manually configure TypeScript settings in Next.js.

B. Next.js automatically detects TypeScript and configures the project.

C. Next.js disables JavaScript support.

D. The project will not run until you install extra plugins.

Solution

1. Step 1: Understand Next.js TypeScript auto-configuration

   Next.js detects tsconfig.json and sets up TypeScript automatically without extra steps.

2. Step 2: Confirm no manual setup needed

   Developers do not need to manually configure TypeScript; Next.js handles it.

3. Final Answer:

   Next.js automatically detects TypeScript and configures the project. -> Option B

4. Quick Check:

   TypeScript auto-config = A [OK]

Hint: Add tsconfig.json and Next.js auto-configures TypeScript [OK]

Common Mistakes:

• Thinking manual config is required
• Believing JavaScript support is disabled
• Assuming extra plugins are mandatory

2. Which file extension should you use for a React component with TypeScript in Next.js?

easy

A. .js

B. .ts

C. .tsx

D. .jsx

Solution

1. Step 1: Identify file extension for React components with TypeScript

   React components with JSX syntax and TypeScript use the .tsx extension.

2. Step 2: Differentiate from plain TypeScript files

   Files without JSX use .ts, but components need .tsx.

3. Final Answer:

   .tsx -> Option C

4. Quick Check:

   React + TypeScript = .tsx [OK]

Hint: Use .tsx for React components with TypeScript [OK]

Common Mistakes:

• Using .ts for components with JSX
• Using .js or .jsx without TypeScript
• Confusing .tsx with .jsx

3. Given this Next.js TypeScript component, what is the rendered output?

type Props = { name: string };

export default function Greeting({ name }: Props) {
  return <h1>Hello, {name}!</h1>
}

Used as <Greeting name="Alice" />

medium

A. Hello, Alice!

B. Hello, {name}!

C. Error: Missing prop type

D. Hello, !

Solution

1. Step 1: Understand prop typing and usage

   The component expects a prop name of type string and uses it inside JSX.

2. Step 2: Substitute the prop value in JSX

   When called with name="Alice", it renders Hello, Alice! inside an h1.

3. Final Answer:

   <h1>Hello, Alice!</h1> -> Option A

4. Quick Check:

   Prop value replaces {name} = C [OK]

Hint: Props typed and passed render as expected in JSX [OK]

Common Mistakes:

• Thinking JSX shows literal {name}
• Assuming missing props cause error here
• Ignoring prop substitution

4. What is wrong with this Next.js TypeScript page component?

export default function Page({ id }: { id: number }) {
  return <p>ID: {id.toUpperCase()}</p>
}

medium

A. Next.js does not support inline prop typing.

B. Missing explicit return type causes a compile error.

C. Props object should be typed as any.

D. Using toUpperCase() on a number causes a compile-time error.

Solution

1. Step 1: Analyze prop type and method usage

   The prop id is a number, but toUpperCase() is a string method.

2. Step 2: Identify compile-time error cause

   Calling toUpperCase() on a number causes a compile-time error because numbers don't have this method.

3. Final Answer:

   Using toUpperCase() on a number causes a compile-time error. -> Option D

4. Quick Check:

   Number.toUpperCase() = error [OK]

Hint: Check method matches prop type to avoid compile-time errors [OK]

Common Mistakes:

• Assuming missing return type causes error
• Thinking inline typing is unsupported
• Using any type unnecessarily

5. You want to create a Next.js API route with TypeScript that returns JSON with a typed message. Which is the correct way to type the request and response parameters?

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

export default function handler(req: ???, res: ???) {
  res.status(200).json({ message: 'Success' });
}

hard

A. req: NextApiRequest, res: NextApiResponse<{ message: string }>

B. req: any, res: any

C. req: Request, res: Response

D. req: NextApiRequest, res: NextApiResponse

Solution

1. Step 1: Import correct types from Next.js

   Use NextApiRequest for request and NextApiResponse with a generic type for response data.

2. Step 2: Specify response JSON shape

   Typing NextApiResponse<{ message: string }> ensures the response JSON matches the expected structure.

3. Final Answer:

   req: NextApiRequest, res: NextApiResponse<{ message: string }> -> Option A

4. Quick Check:

   Typed API response = D [OK]

Hint: Use NextApiResponse with generic for typed JSON response [OK]

Common Mistakes:

• Using generic Request/Response from Node or browser
• Not typing response JSON shape
• Using any type losing type safety