How to import two component in Nextjs

Question

I have created two component header and footer. now I have called header component directly called index.js file working fine. below working page attached header section enter image description here

Now I want to import footer component to index.js file but error displayed, need same page in http://localhost:3000/ (i.e) first displayed Herder another Footer component what I missing could you please solve this issues please. I refer more reference struck two days this concept.

Index.js

import React from 'react';

     import Header from './header'
    import Footer from './footer'
     function Index({posts}) {
       return (
         <>
             <Header posts={posts}/>
             <Footer/> 
         </>
       )
     }
    
    export async function getServerSideProps() {
            const res = await fetch('https://jsonplaceholder.typicode.com/users')
            const posts = await res.json()
    
            return {
              props: {
                posts
              },
            }
          }
    
    export default Index;

Header.js

function Header(props) {
  return (
    <div Style="background: #f2e7d7;padding: 20px; border: 1px solid #eeca97;border-radius: 10px;">
    <h1>Header</h1>
    <p>
       {props.posts.map((post) =>(
         <>
          <span>{post.name}</span><span>/</span>
          </>
        ))}
    </p>
    </div>
  )
}

export default Header

Footer.js

import React from 'react';
 import FooterApi from './footerApi'
 function Footer({postTitle}) {
   return (
     <>
         <FooterApi postTitle={postTitle}/>
     </>
   )
 }

export async function getServerSideProps() {
        const res = await fetch('https://jsonplaceholder.typicode.com/posts')
        const postTitle = await res.json()

        return {
          props: {
            postTitle
          },
        }
      }

export default Footer;

footerApi.js

function FooterApi(props) {
    return (
      <div Style="background: #f2e7d7;padding: 20px; border: 1px solid #eeca97;border-radius: 10px;">
      <h1>Footer</h1>
      <p>
         {props.postTitle.map((post) =>(
           <>
            <span>{post.title}</span>
            </>
          ))}
      </p>
      </div>
    )
  }
  
  export default FooterApi

Answer 1

The problem is that you're calling getServerSideProps() inside of a component and not a page.

To fix this you can fetch your data (postTitle) inside index.js getServerSideProps() and then pass it to the footer like you did to the Header

You index.js should look something like this (I just replaced your code)

import React from 'react';

import Header from './header';
import Footer from './footer';
function Index({ posts, postTitle }) {
  return (
    <>
      <Header posts={posts} />
      <Footer postTitle={postTitle} />
    </>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const posts = await res.json();
  const resFooter = await fetch('https://jsonplaceholder.typicode.com/posts');
  const postTitle = await resFooter.json();
  return {
    props: {
      posts,
      postTitle,
    },
  };
}

export default Index;

and your footer.js

import React from 'react';
 import FooterApi from './footerApi'
 function Footer(props) {
   return (
     <>
         <FooterApi postTitle={props.postTitle}/>
     </>
   )
 }

export default Footer;