How do I pass props in Next.js with TypeScript?

How do I pass props in Next.js with TypeScript?

In Next.js, you can pass props to components by defining the props type using TypeScript. For example, you can create an interface for your props and then use it in your component.

Can you show me a code example?

Sure! Here's a simple example:

interface MyComponentProps {
  title: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ title }) => {
  return <h1>{title}</h1>;
};

export default MyComponent;

How do I use this component in a page?

You can use it in a page like this:

import MyComponent from '../components/MyComponent';

const HomePage: React.FC = () => {
  return <MyComponent title="Welcome to Next.js with TypeScript!" />;
};

export default HomePage;

What if I want to pass multiple props?

You can simply extend your interface to include more props. For example:

interface MyComponentProps {
  title: string;
  description: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, description }) => {
  return <div><h1>{title}</h1><p>{description}</p></div>;
};