自分用のメモ
環境の準備
実行環境
- VS code：v1.62.3
- Node.js：v14.17.3
- React：v17.0.2
プロジェクトの作成
Next Create Appで作成します。
pagesフォルダ配下のソース
初期ページの作成
- 14、15、16行目のいずれでも遷移します。
import Header from './header'
import Link from 'next/link'
const Home = () => {
let title = 'Index'
return (
<div>
<Header title={title} />
<h1 className='bg-primary text-white display-4'>React</h1>
<div className='container'>
<h3 className='my-3 text-primary text-center'>{title}</h3>
<div className='card p-3 text-center'>
<p>これは、ページ移動のサンプルです。</p>
<Link href='/other'><a>Go to Other page（リンク） >></a></Link>
<Link href='/other'><p>Go to Other page（見出し） >></p></Link>
<Link href='/other'><button>Go to Other page（ボタン） >></button></Link>
</div>
</div>
</div>
)
}
export default Home- 複数のページで共通に利用できるようにヘッダーファイルを作成します。
import Head from 'next/head'
import styles from '../styles/Home.module.css'
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 Header遷移先のページ作成
- 14行目で元のページに戻ります。
import Header from './header'
import Link from 'next/link'
const Other = () => {
let title = 'Index'
return (
<div>
<Header title={title} />
<h1 className='bg-primary text-white display-4'>React</h1>
<div className='container'>
<h3 className='my-3 text-primary text-center'>{title}</h3>
<div className='card p-3 text-center'>
<p>これは、もう１つのページの表示です。</p>
<Link href='/'><a><< Back to Index page</a></Link>
</div>
</div>
</div>
)
}
export default Otherあとがき
特になし
コメントを残す