title: Next.js - Typescript interface props pass down to component?
body: <p>I have an interface with defined props for my API data. The interface works if I am using the data directly inside the page where the interface usage is defined. But once I pass down the data to a component I get: <code>Binding element 'site' implicitly has an 'any' type.</code></p>
  <p>Basically, I want to know how I can pass the defined interface props levels deeper.</p>
  <p><strong>The queries:</strong></p>
  <pre><code>  export interface SiteProps {
        address?: [Array];
        copyright: string;
        cookieConsent: {
          enabled: boolean;
          link?: string;
        };
        description: string;
        email: string;
        error?: string;
        gtmID?: string;
        keywords: [Array];
        logo: [object];
        mainMenu: [Array];
        phone?: string;
        promoBar: {
          display: string;
          enabled: boolean;
          link?: string;
          text: [Array];
        };
        seo: {
          favicon?: string;
          faviconLegacy?: string;
          metaDesc?: string;
          metaTitle: string;
          shareDesc?: string;
          shareGraphic?: string;
          shareTitle: string;
          touchIcon?: string;
        };
        siteTitle: string;
        socials: [Array];
        rootDomain: string;
      }
      
      
      export interface PageProps {
        body: [Array];
        featuredImage: string;
        slug: string;
        title: string;
        user: {
          featuredImage: string;
          name: string;
          image: string;
        };
        _id: string;
      }
      
      export interface NotFoundProps {
        data: {
          site: SiteProps;
          page: PageProps;
        };
      }
  </code></pre>
  <p>The page <strong>404.tsx</strong> where the interface props is being used and works:</p>
  <pre><code>import { GetStaticProps, NextPage } from &quot;next&quot;;
  
  import { getStaticPage } from &quot;@lib/helpers&quot;;
  import { notFoundQuery } from &quot;@lib/queries&quot;;
  
  import Layout from &quot;@components/Layout&quot;;
  import { NotFoundProps } from &quot;types/typings&quot;;
  
  const NotFoundPage: NextPage&lt;NotFoundProps&gt; = ({ data }) =&gt; {
    const { page, site } = data;
  
    const { title } = page;
  
    return (
      &lt;Layout site={site} page={page}&gt;
        &lt;div className=&quot;bg-bubblegum&quot;&gt;
          &lt;div className=&quot;relative max-w-5xl px-6 min-h-[500px] md:min-h-[700px]  flex flex-col h-full justify-center mx-auto&quot;&gt;
            &lt;h1 className=&quot;text-5xl antialiased md:text-7xl md:leading-snug&quot;&gt;
              {title}
            &lt;/h1&gt;
  
            &lt;p className=&quot;text-xl md:text-3xl py-7&quot;&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
              aliquip ex ea commodo consequat.
            &lt;/p&gt;
  
            &lt;div className=&quot;flex gap-4 md:mt-5&quot;&gt;
              &lt;button className=&quot;items-center justify-center px-6 py-1.5 text-sm font-medium text-white uppercase transition duration-150 ease-in-out border rounded-full shadow-sm md:text-lg bg-navyBlue border-navyBlue hover:bg-white hover:text-navyBlue&quot;&gt;
                Cta jumbo primair
              &lt;/button&gt;
              &lt;button className=&quot;items-center justify-center px-6 py-1.5 text-sm font-medium uppercase transition duration-150 ease-in-out bg-transparent border rounded-full shadow-sm md:text-lg text-navyBlue border-navyBlue hover:bg-white hover:text-navyBlue&quot;&gt;
                Cta jumbo secundair
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Layout&gt;
    );
  };
  
  export default NotFoundPage;
  
  export const getStaticProps: GetStaticProps = async () =&gt; {
    const pageData = await getStaticPage(notFoundQuery);
  
    return {
      props: {
        data: pageData,
      },
      revalidate: 60,
    };
  };
  </code></pre>
  <p><strong>Layout.tsx</strong> where the interface props not work:</p>
  <pre><code>import Script from &quot;next/script&quot;;
  
  import { m } from &quot;framer-motion&quot;;
  
  import { pageTransitionSpeed } from &quot;@lib/animate&quot;;
  
  const pageTransitionAnim = {
    show: {
      opacity: 1,
      transition: {
        duration: pageTransitionSpeed / 1000,
        delay: 0.2,
        ease: &quot;linear&quot;,
        when: &quot;beforeChildren&quot;,
      },
    },
    hide: {
      opacity: 0,
      transition: {
        duration: pageTransitionSpeed / 1000,
        ease: &quot;linear&quot;,
        when: &quot;beforeChildren&quot;,
      },
    },
  };
  
      const Layout = ({ site, page = {}, children }) =&gt; {
        const { gtmID } = site;
      
        return (
          &lt;&gt;
            {gtmID &amp;&amp; (
              &lt;Script
                id=&quot;gtm&quot;
                dangerouslySetInnerHTML={{
                  __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','${gtmID}');`,
                }}
              /&gt;
            )}
            &lt;m.div
              key={page._id}
              initial=&quot;hide&quot;
              animate=&quot;show&quot;
              exit=&quot;hide&quot;
              variants={pageTransitionAnim}
            &gt;
              &lt;main id=&quot;content&quot;&gt;{children}&lt;/main&gt;
            &lt;/m.div&gt;
          &lt;/&gt;
        );
      };
      
      export default Layout;
  </code></pre>