TypeScript support in Next.js - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a TypeScript React component in Next.js.

NextJS

export default function Home() : [1] {
  return <h1>Welcome to Next.js with TypeScript!</h1>
}

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

AJSX.Element

Bstring

Cnumber

Dvoid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' or 'number' as return type for React components.

Omitting the return type annotation.

The return type of a React component in TypeScript is usually JSX.Element, which represents the rendered UI.

2fill in blank

medium

Complete the code to define a typed prop for a Next.js page component.

NextJS

type Props = { title: string };

export default function Page({ title }: [1]) {
  return <h2>{title}</h2>;
}

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

Aany

Bobject

CProps

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' which disables type checking.

Using 'string' or 'object' which do not match the props shape.

The component expects props of type Props, so the destructured parameter should be typed as Props.

3fill in blank

hard

Fix the error in this Next.js API route handler by typing the request parameter.

NextJS

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

export default function handler(req: [1], res: NextApiResponse) {
  res.status(200).json({ message: 'Hello from API' });
}

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

ARequest

BHttpRequest

CApiRequest

DNextApiRequest

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic or incorrect request types like 'Request' or 'HttpRequest'.

Not typing the request parameter at all.

Next.js provides the NextApiRequest type for API route request objects, ensuring proper typing.

4fill in blank

hard

Fill both blanks to type a Next.js getStaticProps function with typed context and return value.

NextJS

import type { GetStaticProps, [1] } from 'next';

export const getStaticProps: GetStaticProps = async (context: [2]) => {
  return { props: { message: 'Static props with TypeScript' } };
};

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

AGetStaticPropsContext

BGetServerSidePropsContext

CStaticPropsContext

DStaticContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using server-side props context type instead of static props context.

Using made-up or incorrect context types.

The GetStaticPropsContext type is used to type the context parameter in getStaticProps for static generation.

5fill in blank

hard

Fill all three blanks to type a Next.js API route with typed request, response, and query parameter.

NextJS

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

export default function handler(req: [1], res: [2]) {
  const { id }: { id: string } = req.[3];
  res.status(200).json({ id });
}

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

ANextApiRequest

BNextApiResponse

Cquery

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Accessing query parameters from 'body' instead of 'query'.

Using incorrect types for request or response.

The request is typed as NextApiRequest, the response as NextApiResponse, and the query parameters are accessed via req.query.

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