getStaticProps для заполнения верхнего / нижнего колонтитула страницы

Предполагая, что App отображается на странице индекса внутри pages, вы просто передаете его в канализацию.

pages / index.js

import App from '../components/App'

const Index = ({data}) => {
  return(
    <div>
      <App data={data} />
    </div>
  )
}

export const getStaticProps = async () => {
  const res = await fetch('...')
  const data = await res.json()

  return { props: { data } } 
}

А затем в компоненте приложения вы обращаетесь к нему с помощью props.

компоненты / App.js

import Header from './Header'
import Footer from './Footer'

const App = (props) => { // I believe you can also use {data} directly instead of props
  return(
    <div>
      <Header data={props.data} />
      <Footer data={props.data} />
    </div>
  )
}

Затем вы делаете то же самое в компонентах Header и Footer.

components / Header.js

const Header = ({data}) => {
  return(
    <div>
      {data}
    </div>
  )
}