Netfjix
概要
Netflixを模したNext.js製映画情報サイト。映画情報API TMDb からジャンルごとの人気作を取得しジャケット画像を一覧で表示します。画像をクリックすると映画のあらすじが表示され、予告動画が存在する場合は自動再生されます。ページ上部のヒーローイメージは現在の人気作からランダムで選ばれます。
開発経緯
- Netflixのようなアプリライクなサイトを作ってみたい
- 画像や動画のfetchを学ぶ
- React x TypeScriptを学ぶ
- Next.jsを学ぶ
仕様
Platform
web browser
Language
TypeScript
FrontEnd
React
AppFrameWork
Next.js
Styling
Tailwind CSS
WebAPI
TMDb
Pass
Vercel
その他
- 映画情報は自動で更新される
- 全ての画像はNext.jsのImageコンポーネントにより最適化され高速で表示される
- レスポンシブデザイン