Next.jsを少しずつ理解していく9【コンポーネント】

9月 11, 2022

今回は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>
            )
        })}
        </>
    )
}
//（以降省略）

ファイルの変更を保存してブラウザを確認すると、変更前と変わらず、ユーザーデータの一覧が表示されていることが分かります。