nextjs - 生成统一的header和footer - 《前端技术杂记》

// layout.js
import Link from 'next/link'
import Head from 'next/head'
export default ({ children, title = 'This is the default title' }) => (    //解构title和children
  <div>
    <Head>
      <title>{title}</title>
      <meta charSet='utf-8' />
      <meta name='viewport' content='initial-scale=1.0, width=device-width' />
    </Head>
    <header>
      <nav>
        <Link href='/'><a>Home</a></Link> |
        <Link href='/about'><a>About</a></Link> |
        <Link href='/contact'><a>Contact</a></Link>
      </nav>
      <p>---------------------------------------</p>
    </header>
    {children}
    <footer>
      <p>--------------------------------------</p>
      i'm footer
    </footer>
  </div>
)

// index.js
import react, { Component } from 'react'
import Layout from '../layout/layout'
export default class Index extends Component {
  render() {
    return (
      <Layout title='index'>    //通过title设置网页的title
        body
    </Layout>
    )
  }
}