0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

imdb clone Part18 Add Movie page 2/2 画像テキスト類を追加

Posted at

概要

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

zzzzzzzzzzzzzzzzzzzzzzzzzzzzxxxz.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以上のときのレイアウトは横並びになります。
image.png

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

コード部分

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コミット分

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?