概要
今回は映画の個別ページにテキストと画像を追加していきます。
以下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コミット分