【Next.js入門⑤】propsで他のCompoentに値を受け渡す(レイアウト作成)
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。
筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。
propsの基本的な使い方
親Componentから子Componentに値を渡したいときにPropsはとても便利です。
実際にPropsを使ってみましょう。
pages/index.js
import React from 'react'; import Header from '../components/shared/Header'; class Index extends React.Component{ render() { return ( <div> <p>Hello Next.js</p> <Header title="I'm Header Component!" /> //追記 </div> ) } } export default Index;
components/shared/Header.js
import React from 'react'; import Link from 'next/link'; class Header extends React.Component { render() { const title = this.props.title; // Propsでindex.jsからの値を受け取る return ( <React.Fragment> <p>{ title }</p> // 追記 // 省略 export default Header;
これで以下のような出力となりました。
props.childrenを使ってみる
以下の2つのコードは同じ意味を表します。
<Header title="I'm Header Component!" />
<Header title="I'm Header Component!">
</Header>
そして、2つ目のコードの場合、タグ間に要素を入れるとprops.childrenとして値を受け渡すことが可能です。
早速やってみましょう。
class Header extends React.Component { render() { const title = this.props.title; const child = this.props.children; // 追記 return ( <React.Fragment> <p>{ title }</p> <p>{ child }</p> // 追記 // 省略
これでprops.childrenが表示されたはずです。
ベースレイアウトの作成
先ほど触れたprops.childrenを使用して、ポートフォリオサイトのベースレイアウトを作成していきましょう。
まずレイアウトとなるファイルをディレクトリとともに作成します。
components/layouts/BaseLayout.js
import React from 'react'; import BaseLayout from '../components/layouts/BaseLayout'; class About extends React.Component{ render() { return ( <BaseLayout> <h1>This is About page.</h1> </BaseLayout> ) } } export default About;
次に以下のようにファイルを書き換えていってください。
pages/index.js
import React from 'react'; import BaseLayout from '../components/layouts/BaseLayout'; class Index extends React.Component{ render() { return ( <BaseLayout> <h1>This is index page.</h1> </BaseLayout> ) } } export default Index;
pages/portfolios.js
import React from 'react'; import BaseLayout from '../components/layouts/BaseLayout'; class Portfolios extends React.Component{ render() { return ( <BaseLayout> <h1>This is Portfolio page.</h1> </BaseLayout> ) } } export default Portfolios;
pages/cv.js
import React from 'react'; import BaseLayout from '../components/layouts/BaseLayout'; class Cv extends React.Component{ render() { return ( <BaseLayout> <h1>This is Cv page.</h1> </BaseLayout> ) } } export default Cv;
pages/blogs.js
import React from 'react'; import BaseLayout from '../components/layouts/BaseLayout'; class Blogs extends React.Component{ render() { return ( <BaseLayout> <h1>This is Blog page.</h1> </BaseLayout> ) } } export default Blogs;
pages/about.js
import React from 'react'; import BaseLayout from '../components/layouts/BaseLayout'; class About extends React.Component{ render() { return ( <BaseLayout> <h1>This is About page.</h1> </BaseLayout> ) } } export default About;
書く量は多いのですが、index.js以外のファイルの中身はほとんど同じです。
各ファイルに