imdb clone Part17 Add Movie page 1/2 動的ルーティングとデータ取得

概要

目次

今回は映画毎のページを作ります。Next.jsのdynamic Routingを使って実装していきます。
以下gifアニメは個別ページのURLを開いている様子です。

開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

実装のポイント

Next.jsの公式ドキュメントを参考にします。

コード部分

movie/[id]/page.jsx

Layout.jsx

import React from 'react'

async function getMovie(movieId){
    const res = await fetch(
        `https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.API_KEY}`
    );
    return await res.json();
}

export default async function MoviePage({params}) {
  const movieId = params.id;
  const movie = await getMovie(movieId);
  console.log(movie.title);

    return (
    <div>
    </div>
  );
}

参考

next.js dynamic routing

その他

githubコミット分