未找到模块：无法解析 Next.js - TypeScript

Question

I receive the image´s error but I don´t understand why do I get it. Also attached the directory in the second image.

import Link from 'next/link';
import { useState } from 'react';
import { ProductModel } from '../models/product';
import { CardProduct } from '../components/CardProduct';

const List = () => {

  let list: ProductModel[] = [  //ProductModel[] esto significa que va a ser un array de ProductModel
    {
      id: 1,
      name: "shoes",
      price: 9999,
    },
  ];

  const [products, setProducts] = useState<ProductModel[]>(list);

  return (
    <div>
      Soy la página de Productos
      {products.map((element, index) => {
        return <CardProduct product={element}/>;
      })}
      <br/>
      <Link href="/">
        <a>Ir a la home</a>
      </Link>
    </div>
  );
}

export default List;

Answer 1

You need to create an empty tsconfig.json file in your root folder and then run npm as you would normally (for instance, npm run dev ). NextJs will then populate the file with default ts config values. See here:

https://nextjs.org/docs/basic-features/typescript