How to set types for functional component props in Nextjs with TypeScript?
Tags: nextjs
Published: 2021-04-28 00:00:00

---
  title: How to set types for functional component props in Nextjs with TypeScript?
  published: true
  tags: Nextjs
  date: Wed Apr 28 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-types-for-functional-components-props-typescript-nextjs
  cover_image: https://melvingeorge.me/_next/static/images/main-f8e46190f092b2a7db263bddde97ac6a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-types-for-functional-components-props-typescript-nextjs)
  
To set types for functional components props in Nextjs with TypeScript, you can use either an `interface` or `type` alias then pass that as the type parameter to the `NextPage` generic type.

### TL;DR

```jsx
/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

// Props interface
// with username set to string
interface Props {
  username: string;
}

// Defining NextPage as
// type for Name component
// and defining type for props
const Name: NextPage<Props> = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;
```

For example, let's say we have a functional component called `Name` which displays the name of the user. The name can be obtained from the prop called `username`.

So It will look like this,

```jsx
/* Name.tsx component */

const Name = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;
```

Now to set types for the `props` first, we need to import the `NextPage` Generic type from `next` module like this,

```jsx
/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

const Name = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;
```

Now we need to define the type of the `Name` component using the `NextPage` generic type like this,

```jsx
/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

// Defining NextPage as
// type for Name component
const Name: NextPage = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;
```

Now we need to define the type for the props of the `Name` component. Let's use the `interface` to create a type for all the props. In our case, we have only one prop called `username` and we also know that the value of the `username` prop should be a `string`.

So we can create an interface called `Props` with a member of `username` set to type `string` like this,

```jsx
/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

// Props interface
// with username set to string
interface Props {
  username: string;
}

// Defining NextPage as
// type for Name component
const Name: NextPage = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;
```

Now at last we need to pass the `Props` interface as the type parameter to the `NextPage` generic type like this,

```jsx
/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

// Props interface
// with username set to string
interface Props {
  username: string;
}

// Defining NextPage as
// type for Name component
// and defining type for props
const Name: NextPage<Props> = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;
```

That's all! 😃

See the above code live in [codesandbox](https://codesandbox.io/s/setting-types-for-functional-components-props-in-typescript-nextjs-3z6h1?file=/components/Name.tsx)

### Feel free to share if you found this useful 😃.

---