Where to save types in a React/Next application using TypeScript?

I am creating a Next.js page like this

const Index: NextPage<PageProps> = (props) => {
// other code here...

Before this I defined my PageProps like this:

type PageProps = {
    pictures: pictures[]
};

Now I’d need to define the picture type, but given that I want to use it from other pages as well, I would like to have it in an external file.

How can I define the type in an external file and reference it in my page?

>Solution :

You can export PageProps from a separate file and import it in your Next.js page:

// types.ts
export type PageProps = {
  pictures: pictures[]
}

// page.tsx
import type { PageProps } from '../types.ts' // replace with the correct relative path to your `types.ts` file

const Index: NextPage<PageProps> = (props) => {
// other code here...