自分用のメモ
Contents
環境の準備
実行環境
- VS code：v1.62.3
- Node.js：v14.17.3
- React：v17.0.2
プロジェクトの作成
Next Create Appで作成します。
こちらのページを元に作成します。
pagesフォルダ配下のソース
初期ページの作成
- 8～15行目の内容が、Layoutコンポーネントの中で「props.children」で参照できます。
import Link from 'next/link'
import Layout from './components/layout'
const Home = () => {
return (
<div>
<Layout title='Top page.'>
<div className='alert alert-primary text-center'>
<h5 className='mb-4'>Welcome to next.js!</h5>
<Link href='./other'>
<button className='btn btn-primary'>
go to Other >>
</button>
</Link>
</div>
</Layout>
</div>
)
}
export default Home遷移先のページ作成
import Link from 'next/link'
import Layout from './components/layout'
const Other = () => {
return (
<div>
<Layout title='Other page.'>
<div className='alert alert-primary text-center'>
<h5 className='mb-4'>This is Other page...</h5>
<Link href='.'>
<button className='btn btn-primary'>
<< Back to Top
</button>
</Link>
</div>
</Layout>
</div>
)
}
export default Otherpages/components配下のソース
ページを構成するレイアウト
- 14行目の「props.children」で呼び出し元のinnerHTMLが参照できます。
import styles from '../../styles/Home.module.css'
import Header from "./header"
import Footer from "./footer"
const Layout = props => {
return (
<div>
<Header title={props.title} />
<div>
<h1 className='bg-primary px-3 text-white display-4 text-right'>Next.js</h1>
</div>
<div className='container'>
<h3 className='my-3 text-primary text-center'>{props.title}</h3>
{props.children}
</div>
<Footer footer='copyright ???' />
</div>
)
}
export default Layoutimport Head from "next/head"
const Header = props => {
return (
<Head>
<title>{props.title}</title>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css' crossOrigin='anonymous'></link>
</Head>
)
}
export default Headerconst Footer = props => {
return (
<div className='text-center h6 my-4'>
<div>{props.footer}</div>
</div>
)
}
export default Footerあとがき
特になし
コメントを残す