概要

今回は映画の個別ページにテキストと画像を追加していきます。
以下gifアニメは実装後の様子です。

開発環境

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"

実装のポイント

cssのflexを使ってディスプレイサイズによって縦並びか横並びになります。
ディスプレイのサイズが768px以上のときのレイアウトは横並びになります。

ディスプレイのサイズが768px以下のときのレイアウトは縦並びになります。

コード部分

app/movie/[id]/page.jsx

page.jsx

import React from 'react'
+import Image from 'next/image';

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);    
    return (
+    <div className="w-full">
+        <div className="p-4 md:pt-8 flex flex-col md:flex-row items-center content-center max-w-6xl mx-auto md:space-x-6">
+            <Image
+                src={`https://image.tmdb.org/t/p/original/${movie.backdrop_path || movie.poster_path}`}
+                width={500}
+                height={300}
+                className="rounded-lg"
+                style={{
+                    maxWidth:"100%",
+                    height:"100%",
+                }}
+                placeholder="blur"
+                blurDataURL="/spinner.svg"
+                alt="Movie poster"
+                ></Image>
+                <div className="p-2">
+                    <h2 className="text-lg mb-3 font-bold">
+                        {movie.title || movie.name}
+                    </h2>
+                </div>
+                <p className="text-lg mb-3">
+                    <span className="font-semibold mr-1">Overview</span>
+                    {movie.overview}
+                </p>
+                <p className="mb-3">
+                    <span className="font-semibold mr-1">Date Released</span>
+                    {movie.release_date || movie.first_air_date}
+                </p>
+                <p className="mb-3">
+                    <span className="font-semibold mr-1">Rating</span>
+                    {movie.vote_count}
+                </p>
+        </div>
    </div>
  );
}

参考

css

flex-col

その他

Udemy

githubコミット分