How to set types for functional component props in Nextjs with TypeScript?

Originally posted here!

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

/* 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,

/* 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,

/* 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,

/* 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,

/* 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,

/* 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

Feel free to share if you found this useful 😃.

---