
今回はNext.jsのコンポーネントについて紹介します。使用方法はReactのそれと変わりませんので、サクッと紹介していきます。
Next.jsでコンポーネントを使用する
今回は前回までに作成したusers.jsファイルの内容の一部を、新たに作成するコンポーネントファイルに移行したいと思います。
まずはpre-renderingフォルダ直下にcomponentsディレクトリを用意し、その中にuser.jsファイルを作成します。
Terminal
mkdir components
touch components/user.js
pre-rendering/components/user.js
//propsを受け取れるように引数を設定
function User({user}){
return(
<>
<p>{user.name}</p>
<p>{user.email}</p>
</>
)
}
export default User
更に、pagesのusers.jsファイルを次のように変更してuserコンポーネントを表示できるようにします。
pre-rendering/pages/users.js
//userコンポーネントを読み込む
import User from "../components/user"
function UserList({ users }) {
return(
<>
<h1>List of users</h1>
{users.map((user) => {
return(
<div key={user.id}>
//コンポーネントにuserプロップスを渡す
<User user={user}/>
<br></br>
</div>
)
})}
</>
)
}
//(以降省略)
ファイルの変更を保存してブラウザを確認すると、変更前と変わらず、ユーザーデータの一覧が表示されていることが分かります。
まとめ
以上でNext.jsのコンポーネントについての紹介は終わりです。
次回は動的ルーティングとgetStaticPaths関数について紹介しながら、簡単なブログ機能を作っていきます
それでは!