TypeScript support in Next.js - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the first step to add TypeScript support in a new Next.js project?

Create a Next.js project normally, then add a tsconfig.json file or rename a page file to .tsx. Next.js will detect TypeScript and install necessary packages automatically.

beginner

How does Next.js handle TypeScript configuration by default?

Next.js provides a default tsconfig.json with recommended settings optimized for Next.js apps, so you don't need to configure it manually unless you want custom settings.

beginner

What file extensions are used for TypeScript files in Next.js?

Use .ts for plain TypeScript files and .tsx for files that include JSX (React components).

intermediate

Can you use TypeScript with Next.js API routes?

Yes, Next.js API routes support TypeScript. You can write your API handler files with .ts extensions and use type annotations for request and response objects.

intermediate

How does Next.js improve developer experience when using TypeScript?

Next.js automatically type checks your code during development and build. It also supports fast refresh with TypeScript and provides helpful error messages to catch mistakes early.

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

A Next.js installs TypeScript packages and configures the project automatically.

B Next.js ignores the file and continues with JavaScript.

C You must manually install TypeScript packages.

D The project stops working until you remove the file.

Next.js detects the tsconfig.json and installs required TypeScript packages automatically.

Which file extension should you use for React components written in TypeScript in Next.js?

A .jsx

B .ts

C .js

D .tsx

Use .tsx for files that contain JSX syntax, like React components.

Does Next.js support TypeScript in API route files?

A Yes, with .ts files.

B No, API routes must be JavaScript.

C Yes, but only with .js files.

D Only if you disable JavaScript support.

Next.js supports TypeScript in API routes using .ts files.

What benefit does Next.js provide when using TypeScript during development?

A No benefits, you must run separate tools.

B It disables JavaScript support.

C Automatic type checking and helpful error messages.

D Slower builds without error messages.

Next.js automatically type checks your code and shows clear errors to improve development.

If you want to customize TypeScript settings in Next.js, what should you do?

A You cannot customize TypeScript settings.

B Edit the default <code>tsconfig.json</code> created by Next.js.

C Create a JavaScript config file instead.

D Rename files to .js.

You can edit the tsconfig.json file to add or change TypeScript settings as needed.

Explain how to start using TypeScript in a new Next.js project and what happens behind the scenes.

Think about the simple steps and automatic setup Next.js provides.

Describe the advantages of using TypeScript with Next.js for both pages and API routes.

Focus on how TypeScript helps catch mistakes and improves coding confidence.

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