TypeScript support in Next.js - Mini Project: Build & Apply

TypeScript support in Next.js

📖 Scenario: You are building a simple Next.js app that uses TypeScript to ensure your code is safe and clear. You want to create a typed component that shows a greeting message with a name.

🎯 Goal: Build a Next.js functional component using TypeScript that accepts a name prop of type string and displays a greeting message.

📋 What You'll Learn

Create a TypeScript interface for the component props

Use the interface to type the component props

Create a functional component that returns a greeting message

Export the component as default

💡 Why This Matters

🌍 Real World

Using TypeScript in Next.js helps catch errors early and makes your code easier to understand and maintain.

💼 Career

Many companies use Next.js with TypeScript for building scalable web apps, so knowing this skill is valuable for frontend developer roles.

1

Create a TypeScript interface for props

Create a TypeScript interface called GreetingProps with one property name of type string.

NextJS

// Your code here

Need a hint?

Use the interface keyword to define the shape of the props object.

2

Create a typed functional component

Create a functional component called Greeting that takes props typed as GreetingProps and returns a <div> with the text Hello, {props.name}!.

NextJS

interface GreetingProps {
  name: string;
}

// Your code here

Need a hint?

Use the function keyword and specify the props type after the parameter name.

3

Export the component as default

Add a default export statement for the Greeting component.

NextJS

interface GreetingProps {
  name: string;
}

function Greeting(props: GreetingProps) {
  return Hello, {props.name}!;
}

// Your code here

Need a hint?

Use export default followed by the component name.

4

Use the component in a Next.js page

Create a Next.js page component called HomePage that imports Greeting and uses it with the prop name set to "Next.js Learner". Export HomePage as default.

NextJS

interface GreetingProps {
  name: string;
}

function Greeting(props: GreetingProps) {
  return Hello, {props.name}!;
}

export default Greeting;

// Your code here

Need a hint?

Import the Greeting component and use it inside the HomePage component's return statement.