「Netflixのクローンを作るチュートリアル」に関するメモ

ピン留めされたアイテム

ogre

以下の本を進める上で、起こったエラーなどのメモ

ogre

4-4 useProps.tsでAPIからmovieデータを取得する

問題：./Row/index.tsにエラー

./Row/index.ts

// 省略
export const Row = ({ title, fetchUrl, isLargeRow }: Props) => {
  return (
    <Layout title={title} isLargeRow={isLargeRow} {...useProps(fetchUrl)} /> // ここにエラー
  );
};

エラー文

解決方法：

useProps.tsのreturnをオブジェクトで返す
./Row/useProps.ts

export const useProps = (fetchUrl: string) => {
// 省略
-  return movies;
+  return {movies};
};

ogre

4-6 Tailwind CSSにてLayoutコンポーネントをスタイリングする

問題：Tailwind CSSが効かない

以下を実行。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

このコマンドがエラーになり、tailwind.config.jsが作成されない。

npx tailwindcss init -p

原因：tailwindcssのバージョンの問題

v4系とv3系だと導入方法が違うらしい。
v3系にダウングレード、tailwind.config.jsファイルを自分で作成して解決。

用意されていたリポジトリを利用せず、いちから自分で環境構築すればエラーが出なかったのかも？

ogre

7-3 RowコンポーネントのusePropsでクリック時の挙動を追加する

問題：requests.fetchMovieVideos(movie.id)が取得できない

./Row/useProps.ts

//省略
  const handleClick = async (movie: Movie) => {
    if (trailerUrl) {
      setTrailerUrl("");
    } else {
      const moviePlayUrl = await axios.get(requests.fetchMovieVideos(movie.id));
      setTrailerUrl(moviePlayUrl.data.results[0]?.key);
    }
  };
//省略

原因：request.tsのimportし忘れ

下記の記述忘れ😮‍💨
./Row/useProps.ts

import { requests } from "../../request.ts";