Getting Started with TypeScript in Next.js (Beginner Friendly)

If you are starting with TypeScript, the best way to learn is by using it in a real project like Next.js.

In this article, we will learn a simple example and understand one important idea:

The difference between types and real data.

Simple TypeScript Example in Next.js

import React from "react";

type User = {
  name: string;
  age?: number;
};
const Page = () => {
  const user: User = {
    name: "hello",
    age: 20,
  };
  return (
    <div>
      age: {user.age}
      name: {user.name}
    </div>
  );
};
export default Page;

Understanding the Code

1. Defining a Type

type User = {
  name: string;
  age?: number;
};

This defines the structure of an object.

• name is required
• age? is optional

Example valid objects:

{ name: "Ram" }
{ name: "Ram", age: 25 }

2. Creating a Typed Object

const user: User = {
  name: "hello",
  age: 20,
};

Here:

• user is real data
• TypeScript checks if it matches the User type

3. Using Data in JSX

<div>
  hello {user.age}
</div>

We are displaying the value of user.age.

Since age is optional, it may also be undefined.

Common Mistake

User.age

This is wrong.

Why?

• User is a type
• Types do not exist at runtime
• You cannot access properties from a type

Handling Optional Values Safely

Since age is optional, we should handle missing values:

<div>
  hello {user.age ?? "No age provided"}
</div>

TypeScript in React Components (Important)

Now let’s see how TypeScript is used in React components using props.

Example: User Card Component

type UserCardProps = {
  name: string;
  age?: number;
};

const UserCard = ({ name, age }: UserCardProps) => {
  return (
    <div>
      <h2>{name}</h2>
      {age && <p>Age: {age}</p>}
    </div>
  );
};

Understanding This Example

1. Defining Props Type

type UserCardProps = {
  name: string;
  age?: number;
};

This defines what data the component will receive.

2. Using Props in Component

const UserCard = ({ name, age }: UserCardProps) => {

We are telling TypeScript:

• name is a string
• age is optional number

3. Conditional Rendering

{age && <p>Age: {age}</p>}

This means:

• If age exists → show it
• If not → don’t show anything

Key Concept

TypeScript helps you define rules for components.

• Props type = structure of data coming into component
• Component = uses that data safely

What You Learned

• How to define types
• How to use typed objects
• Difference between type and value
• How to type React props
• How to conditionally render optional values

Next Step

After this, you should learn:

• Typing API responses
• Typing forms in React
• Building small Next.js + TypeScript projectsNext Step

After this, you should learn:

• Typing API responses
• Typing forms in React
• Building small Next.js + TypeScript projects