title: How to replicate the nextjs getStaticProps() function for all pages without having to repeat all pages
body: <p>How can I replicate the nextjs <code>getStaticProps()</code> function for all pages without having to repeat all pages?</p>
  <p>These are my pages and my layout component. I wanted to add a global function to all pages, is that possible? Can you add a global <code>getStaticProps</code> function?</p>
  <p><strong>index.tsx</strong></p>
  <pre><code>import Link from 'next/link';
  import Layout from '../components/Layout';
  import {InferGetStaticPropsType} from 'next';
  
  function Index({data}: InferGetStaticPropsType&lt;typeof getStaticProps&gt;) {
    return (
      &lt;Layout
        title=&quot;Página - Home&quot;
        description=&quot;desenvolvimento web, web development, construção de sites&quot;
        title_meta=&quot;desenvolvimento web, web development, construção de sites&quot;
        description_meta=&quot;desenvolvimento web, web development, construção de sites&quot;
        site_name=&quot;Rafael Web development&quot;
        url=&quot;http://localhost:3000/&quot;
        images={data}&gt;
        &lt;div&gt;
          &lt;h1&gt;Hello Next.js INDEX&lt;/h1&gt;
          &lt;Link href=&quot;/sobre&quot;&gt;
            &lt;a&gt;About&lt;/a&gt;
          &lt;/Link&gt;
          &lt;main&gt;&lt;/main&gt;
        &lt;/div&gt;
      &lt;/Layout&gt;
    );
  }
  
  export const getStaticProps = async () =&gt; {
    const res = await fetch(process.env.url_index);
    const data = await res.json();
  
    return {
      props: {data},
    };
  };
  
  export default Index;
  
  </code></pre>
  <p><strong>contato.tsx</strong></p>
  <pre><code>import Layout from &quot;../components/Layout&quot;;
  import TextField from '@material-ui/core/TextField';
  import Button from '@material-ui/core/Button';
  import Alert from '@material-ui/lab/Alert';
  import AlertTitle from &quot;@material-ui/lab/AlertTitle&quot;;
  import { InferGetStaticPropsType } from 'next';
  
  function Contato({ data }: InferGetStaticPropsType&lt;typeof getStaticProps&gt;) {  
    return(
      &lt;Layout title=&quot;Página - Contato&quot; description=&quot;desenvolvimento web, web development, construção de sites&quot; 
      title_meta=&quot;desenvolvimento web, web development, construção de sites&quot;
      description_meta=&quot;desenvolvimento web, web development, construção de sites&quot; site_name=&quot;Rafael Web development&quot;
      url=&quot;http://localhost:3000/&quot; images={data}&gt;
          &lt;div&gt;
          &lt;h1&gt;Contato&lt;/h1&gt;
          &lt;form&gt;
            &lt;Alert severity=&quot;error&quot; id=&quot;error_contact&quot; style={{display:&quot;none&quot;,marginBottom:20}}&gt;Erros:&lt;br /&gt;&lt;/Alert&gt;
            &lt;Alert severity=&quot;success&quot; id=&quot;sucess_contact&quot; style={{display:&quot;none&quot;,marginBottom:20}}&gt;
              &lt;AlertTitle&gt;Enviado com sucesso!&lt;/AlertTitle&gt;
            &lt;/Alert&gt;
            &lt;TextField id=&quot;outlined-nome&quot; label=&quot;Nome&quot; name=&quot;nome&quot; type=&quot;text&quot; variant=&quot;outlined&quot;  
            style={{width:&quot;100%&quot;,paddingBottom:20}} /&gt;
            &lt;TextField id=&quot;outlined-email&quot; label=&quot;E-mail&quot; name=&quot;email&quot; type=&quot;text&quot;  variant=&quot;outlined&quot; 
            style={{width:&quot;100%&quot;,paddingBottom:20}}  /&gt;
            &lt;TextField id=&quot;outlined-assunto&quot; label=&quot;Assunto&quot; name=&quot;assunto&quot; type=&quot;text&quot; variant=&quot;outlined&quot; 
            style={{width:&quot;100%&quot;,paddingBottom:20}}  /&gt;
            &lt;TextField id=&quot;outlined-texto&quot; label=&quot;Texto&quot; name=&quot;texto&quot; type=&quot;text&quot; variant=&quot;outlined&quot; 
            multiline style={{width:&quot;100%&quot;,paddingBottom:20}} /&gt;
            &lt;Button variant=&quot;outlined&quot; color=&quot;secondary&quot; onClick={handleSubmit}&gt;
              Enviar
            &lt;/Button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/Layout&gt;);
  }
  
  const validateEmail = (email:string)=&gt; {
    const re = /^(([^&lt;&gt;()\[\]\\.,;:\s@&quot;]+(\.[^&lt;&gt;()\[\]\\.,;:\s@&quot;]+)*)|(&quot;.+&quot;))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
  }
  
  const setMessage = (item:string)=&gt; {
    (document.getElementById(&quot;error_contact&quot;) as HTMLHtmlElement).style.display=&quot;flex&quot;;
    (document.getElementById(&quot;error_contact&quot;) as HTMLHtmlElement).style.flexDirection=&quot;row&quot;;
    (document.getElementById(&quot;error_contact&quot;) as HTMLHtmlElement).style.flexWrap=&quot;wrap&quot;;
    (document.getElementById(&quot;texto&quot;) as HTMLHtmlElement).innerHTML+= &quot;&lt;div&gt;&quot;+item+&quot;&lt;/div&gt;&lt;br /&gt;&quot;;
   
  }
  
  const handleSubmit = async (event)=&gt;{
    event.preventDefault();
    let list: string[] = [&quot;Nome&quot;,&quot;E-mail&quot;,&quot;Assunto&quot;,&quot;Texto&quot;];
    let context : string[] = [&quot;outlined-nome&quot;,&quot;outlined-email&quot;,&quot;outlined-assunto&quot;,&quot;outlined-texto&quot;];
  
    (document.getElementById(&quot;error_contact&quot;) as HTMLHtmlElement).innerHTML+= &quot;&lt;div style='flex-grow: 1;flex-basis: 100%' id='texto'&gt;&lt;/div&gt;&lt;br /&gt;&quot;;
    (document.getElementById(&quot;texto&quot;) as HTMLHtmlElement).innerHTML= &quot;&quot;;
    (document.getElementById(&quot;sucess_contact&quot;) as HTMLHtmlElement).style.display=&quot;none&quot;;
    let cond:boolean = false;
  
    context.forEach(async(item, index)=&gt;{ 
      let test : string = (document.getElementById(item) as HTMLInputElement).value;
      if(test.replace(/\s/g,&quot;&quot;)===&quot;&quot;){
        setMessage(&quot;Preencha o campo &quot;+list[index]);
        cond=true;
      }
      
      if(item==&quot;outlined-email&quot;){ 
        let p = validateEmail(test);
        if(p==false){
           setMessage(&quot;E-mail invalido!&quot;);
           cond=true;
        }
        
      }
    });
  
    if(cond==false){
      (document.getElementById(&quot;error_contact&quot;) as HTMLHtmlElement).style.display=&quot;none&quot;;
  
      let datas:any = {nome: (document.getElementById(&quot;outlined-nome&quot;) as HTMLInputElement).value, 
      email: (document.getElementById(&quot;outlined-email&quot;) as HTMLInputElement).value,
      assunto: (document.getElementById(&quot;outlined-assunto&quot;) as HTMLInputElement).value,
      texto: (document.getElementById(&quot;outlined-texto&quot;) as HTMLInputElement).value};
    
      try {
        let res = await fetch(process.env.url_contact, {
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }, 
          body: JSON.stringify(datas),
          credentials:&quot;same-origin&quot;
        });
        
        if(res.ok==true){
          (document.getElementById(&quot;sucess_contact&quot;) as HTMLHtmlElement).style.display=&quot;flex&quot;;
        }
      }catch(error){
        alert(error);
      }
    }
   
  }
  
  export const getStaticProps = async () =&gt; {
    const res = await fetch(process.env.url_index);
    const data = await res.json();
  
    return {
      props: { data }
    }
  }
  
  
  
  export default Contato;
  </code></pre>
  <p><strong>component: Layout.tsx</strong></p>
  <pre><code>import Header from &quot;./Header&quot;;
  import NavBar from &quot;./NavBar&quot;;
  import Head from 'next/head';
  
  
  const Layout = (props:any) =&gt; (
    &lt;div&gt;
      &lt;Head&gt;
        &lt;title&gt;{props.title}&lt;/title&gt;
        &lt;meta name=&quot;description&quot; content={props.description} /&gt;
        &lt;meta property=&quot;og:type&quot; content=&quot;website&quot; /&gt;
        &lt;meta name=&quot;og:title&quot; property=&quot;og:title&quot; content={props.title_meta} /&gt;
        &lt;meta name=&quot;og:description&quot; property=&quot;og:description&quot; content={props.description_meta} /&gt;
        &lt;meta property=&quot;og:site_name&quot; content={props.site_name} /&gt;
        &lt;meta property=&quot;og:url&quot; content={props.url} /&gt;  
        &lt;link rel=&quot;shortcut icon&quot; href=&quot;/icon_OaB_icon.ico&quot; /&gt;
      &lt;/Head&gt;
      &lt;Header images={props.images} /&gt;
      &lt;div className=&quot;layoutStyle&quot;&gt;
        &lt;NavBar /&gt;
        &lt;div className=&quot;Content&quot;&gt;
          {props.children}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  
  
  export default Layout;
  </code></pre>