如何为所有页面复制 nextjs getStaticProps() 函数，而不必重复所有页面

Question

如何getStaticProps()为所有页面复制 nextjs 函数，而不必重复所有页面？

\n

这些是我的页面和布局组件。我想为所有页面添加全局功能，可以吗？可以添加一个全局getStaticProps函数吗？

\n

索引.tsx

\n

import Link from 'next/link';\nimport Layout from '../components/Layout';\nimport {InferGetStaticPropsType} from 'next';\n\nfunction Index({data}: InferGetStaticPropsType<typeof getStaticProps>) {\n  return (\n    <Layout\n      title="P\xc3\xa1gina - Home"\n      description="desenvolvimento web, web development, constru\xc3\xa7\xc3\xa3o de sites"\n      title_meta="desenvolvimento web, web development, constru\xc3\xa7\xc3\xa3o de sites"\n      description_meta="desenvolvimento web, web development, constru\xc3\xa7\xc3\xa3o de sites"\n      site_name="Rafael Web development"\n      url="http://localhost:3000/"\n      images={data}>\n      <div>\n        <h1>Hello Next.js INDEX</h1>\n        <Link href="/sobre">\n          <a>About</a>\n        </Link>\n        <main></main>\n      </div>\n    </Layout>\n  );\n}\n\nexport const getStaticProps = async () => {\n  const res = await fetch(process.env.url_index);\n  const data = await res.json();\n\n  return {\n    props: {data},\n  };\n};\n\nexport default Index;\n\n

\n

接触.tsx

\n

import Layout from "../components/Layout";\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport Alert from '@material-ui/lab/Alert';\nimport AlertTitle from "@material-ui/lab/AlertTitle";\nimport { InferGetStaticPropsType } from 'next';\n\nfunction Contato({ data }: InferGetStaticPropsType<typeof getStaticProps>) {  \n  return(\n    <Layout title="P\xc3\xa1gina - Contato" description="desenvolvimento web, web development, constru\xc3\xa7\xc3\xa3o de sites" \n    title_meta="desenvolvimento web, web development, constru\xc3\xa7\xc3\xa3o de sites"\n    description_meta="desenvolvimento web, web development, constru\xc3\xa7\xc3\xa3o de sites" site_name="Rafael Web development"\n    url="http://localhost:3000/" images={data}>\n        <div>\n        <h1>Contato</h1>\n        <form>\n          <Alert severity="error" id="error_contact" style={{display:"none",marginBottom:20}}>Erros:<br /></Alert>\n          <Alert severity="success" id="sucess_contact" style={{display:"none",marginBottom:20}}>\n            <AlertTitle>Enviado com sucesso!</AlertTitle>\n          </Alert>\n          <TextField id="outlined-nome" label="Nome" name="nome" type="text" variant="outlined"  \n          style={{width:"100%",paddingBottom:20}} />\n          <TextField id="outlined-email" label="E-mail" name="email" type="text"  variant="outlined" \n          style={{width:"100%",paddingBottom:20}}  />\n          <TextField id="outlined-assunto" label="Assunto" name="assunto" type="text" variant="outlined" \n          style={{width:"100%",paddingBottom:20}}  />\n          <TextField id="outlined-texto" label="Texto" name="texto" type="text" variant="outlined" \n          multiline style={{width:"100%",paddingBottom:20}} />\n          <Button variant="outlined" color="secondary" onClick={handleSubmit}>\n            Enviar\n          </Button>\n        </form>\n      </div>\n    </Layout>);\n}\n\nconst validateEmail = (email:string)=> {\n  const re = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[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,}))$/;\n  return re.test(String(email).toLowerCase());\n}\n\nconst setMessage = (item:string)=> {\n  (document.getElementById("error_contact") as HTMLHtmlElement).style.display="flex";\n  (document.getElementById("error_contact") as HTMLHtmlElement).style.flexDirection="row";\n  (document.getElementById("error_contact") as HTMLHtmlElement).style.flexWrap="wrap";\n  (document.getElementById("texto") as HTMLHtmlElement).innerHTML+= "<div>"+item+"</div><br />";\n \n}\n\nconst handleSubmit = async (event)=>{\n  event.preventDefault();\n  let list: string[] = ["Nome","E-mail","Assunto","Texto"];\n  let context : string[] = ["outlined-nome","outlined-email","outlined-assunto","outlined-texto"];\n\n  (document.getElementById("error_contact") as HTMLHtmlElement).innerHTML+= "<div style='flex-grow: 1;flex-basis: 100%' id='texto'></div><br />";\n  (document.getElementById("texto") as HTMLHtmlElement).innerHTML= "";\n  (document.getElementById("sucess_contact") as HTMLHtmlElement).style.display="none";\n  let cond:boolean = false;\n\n  context.forEach(async(item, index)=>{ \n    let test : string = (document.getElementById(item) as HTMLInputElement).value;\n    if(test.replace(/\\s/g,"")===""){\n      setMessage("Preencha o campo "+list[index]);\n      cond=true;\n    }\n    \n    if(item=="outlined-email"){ \n      let p = validateEmail(test);\n      if(p==false){\n         setMessage("E-mail invalido!");\n         cond=true;\n      }\n      \n    }\n  });\n\n  if(cond==false){\n    (document.getElementById("error_contact") as HTMLHtmlElement).style.display="none";\n\n    let datas:any = {nome: (document.getElementById("outlined-nome") as HTMLInputElement).value, \n    email: (document.getElementById("outlined-email") as HTMLInputElement).value,\n    assunto: (document.getElementById("outlined-assunto") as HTMLInputElement).value,\n    texto: (document.getElementById("outlined-texto") as HTMLInputElement).value};\n  \n    try {\n      let res = await fetch(process.env.url_contact, {\n        method: 'post',\n        headers: {\n          'Accept': 'application/json',\n          'Content-Type': 'application/json'\n        }, \n        body: JSON.stringify(datas),\n        credentials:"same-origin"\n      });\n      \n      if(res.ok==true){\n        (document.getElementById("sucess_contact") as HTMLHtmlElement).style.display="flex";\n      }\n    }catch(error){\n      alert(error);\n    }\n  }\n \n}\n\nexport const getStaticProps = async () => {\n  const res = await fetch(process.env.url_index);\n  const data = await res.json();\n\n  return {\n    props: { data }\n  }\n}\n\n\n\nexport default Contato;\n

\n

组件：Layout.tsx

\n

import Header from "./Header";\nimport NavBar from "./NavBar";\nimport Head from 'next/head';\n\n\nconst Layout = (props:any) => (\n  <div>\n    <Head>\n      <title>{props.title}</title>\n      <meta name="description" content={props.description} />\n      <meta property="og:type" content="website" />\n      <meta name="og:title" property="og:title" content={props.title_meta} />\n      <meta name="og:description" property="og:description" content={props.description_meta} />\n      <meta property="og:site_name" content={props.site_name} />\n      <meta property="og:url" content={props.url} />  \n      <link rel="shortcut icon" href="/icon_OaB_icon.ico" />\n    </Head>\n    <Header images={props.images} />\n    <div className="layoutStyle">\n      <NavBar />\n      <div className="Content">\n        {props.children}\n      </div>\n    </div>\n  </div>\n);\n\n\nexport default Layout;\n

\n

Answer 1

显然这是不可能的：https://github.com/vercel/next.js/discussions/10949

您可以使用 getInitialProps（但这样您就无法在构建时生成页面），或者您可以将代码抽象为函数并将其导入到每个页面中。