自分用のメモ
Contents
環境の準備
実行環境
- VS code：v1.62.3
- Node.js：v14.17.3
- React：v17.0.2
- Typescript：v4.1.6
プロジェクトの作成（Typescriptで作成）
Next Create Appで作成します。
こちらの記事（Javascript）をTypescriptで再構成したものです。
pagesフォルダ配下のソース
初期ページの作成
- 9～16行目の内容が、Layoutコンポーネントの中で「props.children」で参照できます。
import type { NextPage } from 'next'
import Link from 'next/link'
import Layout from './components/layout'
const Home: NextPage = () => {
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 type { NextPage } from 'next'
import Link from 'next/link'
import Layout from './components/layout'
const Other: NextPage = () => {
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配下のソース
ページを構成するレイアウト
- 19行目の「props.children」で呼び出し元のinnerHTMLが参照できます。
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import styles from '../../styles/Home.module.css'
import Header from "./header"
import Footer from "./footer"
type LayoutPropsType = {
title: string
children: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
}
const Layout = (props: LayoutPropsType) => {
return (
<div>
<Header title={props.title} />
<div>
<h1 className='bg-primary px-3 text-white display-4 text-right'>Next.js × Typescript</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"
type HeaderPropsType = {
title: string
}
const Header = (props: HeaderPropsType) => {
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 Headertype FooterPropsType = {
footer: string
}
const Footer = (props: FooterPropsType) => {
return (
<div className='text-center h6 my-4'>
<div>{props.footer}</div>
</div>
)
}
export default Footerあとがき
特になし
コメントを残す