Next.jsでpropsを使ってテキスト情報を渡す

Next.jsでpropsを使ってテキスト情報を渡す方法です。
test.jsでtitleという変数にテキスト情報を詰め込んで、test2.jsに渡します。

test.js

import React from 'react';
import Test2 from './test2';

function  Test() {
  return (
    <div style={{ textAlign: 'center' }}>
      <h1>Test1</h1>
      <Test2 title="from test1 to test2"/>
    </div>
  );
}

export default Test;

title="from test1 to test2"
のところで設定。

test2.js

import React from 'react'

const Test2 = (props) => {

    let title = props.title;

    return (
        <div>
            <p>Test2</p>
            <p>{title}</p>
        </div>
    )
}

export default Test2

###結果

無事テキスト情報が渡りました！
ただ、残念ながら値情報は渡せないようです。

値を渡したい場合は、useContextを使用します。
https://qiita.com/Pirosiki_/items/c8648bca23d4dc72287d

###参考にさせていただいたサイト様
https://qiita.com/rio_threehouse/items/7632f5a593cf218b9504