I have a very simple script.

Here is the index.tsx of my Next APP :

import type { NextPage } from 'next'
import SongsList from '../components/SongsList/SongsList'
import { GetStaticProps } from 'next'
import styles from '../styles/Home.module.css'

const SONGS: Song[] = [
  {
    title: 'Birdseye Blues',
    artist: 'Chris Haugen',
    file: 'Birdseye Blues - Chris Haugen.mp3',
    image: 'https://images.unsplash.com/photo-1598387993441-a364f854c3e1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80'
  },
  {
    title: 'Depth Fuse',
    artist: 'French Fuse',
    file: 'Depth Fuse - French Fuse.mp3',
    image: 'https://images.unsplash.com/photo-1617136785693-54b279bddfeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80'
  },
  {
    title: 'Duh Fuse',
    artist: 'French Fuse',
    file: 'Duh Fuse - French Fuse.mp3',
    image: 'https://images.unsplash.com/photo-1614247912229-26a7e2114c0a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80'
  }
]

interface Song {
  title: string;
  artist: string;
  file: string;
  image: string
}

const Home: NextPage<Song> = (props) => {
  return (
    <div className={styles.container}>
      <SongsList songs={props.songs} />
    </div>
  )
}

export const getStaticProps: GetStaticProps = async() => {
  return {
    props: {
      songs: SONGS
    },
    revalidate: 3600
  }
}

export default Home

Sadly, I have an error right there :

<SongsList songs={props.songs} />

The error is saying :

(property) songs: any
Type '{ songs: any; }' is not assignable to type 'IntrinsicAttributes'.
Property 'songs' does not exist on type 'IntrinsicAttributes'.ts(2322)

Here is my SongsList.tsx component :

import { NextPage } from 'next'
import Song from '../Song/Song'

type Song = {
    title: string;
    artist: string;
    file: string;
    image: string;
}
  
const SongsList: NextPage<Song> = ( props: any ) => {
    return (
        <div>
            {
                props.songs.map(function(e: any) {
                    return (
                        <Song song={e} key={e.title} />
                    )
                })
            }
        </div>
    )
}

export default SongsList;

What did I do wrong there ?

Edit : I have tried all the solutions below, but no solutions are working, I have edited and added SongList.tsx for Bao Huynh Lam

Thank you for your help :) !