如何在 Nextjs 中导入两个组件

Question

我创建了两个组件页眉和页脚。现在我已经直接调用了名为 index.js 文件的标头组件，工作正常。在工作页面下方附加标题部分 enter image description here

现在我想将页脚组件导入 index.js 文件但显示错误，需要在 http://localhost:3000/ 中的同一页面（即）首先显示 Herder 另一个页脚组件我错过了什么请你解决这个问题.我参考了更多参考资料，两天后发现了这个概念。

索引.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

页脚.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

问题是您在组件而不是页面内部调用getServerSideProps()。

要解决此问题，您可以在 index.js getServerSideProps() 中获取您的数据（postTitle），然后像您对页眉所做的那样将其传递给页脚

你的 index.js 应该看起来像这样（我刚刚替换了你的代码）

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;

还有你的 footer.js

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

export default Footer;