Netfjix

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

Netfjix

その他

  • 映画情報は自動で更新される
  • 全ての画像はNext.jsのImageコンポーネントにより最適化され高速で表示される
  • レスポンシブデザイン