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.