TL;DR https://reddit-image-viewer.vercel.app
私は最近 React と Next.js に深く潜り込んでいます。 その没頭の大きな部分は、Next.js のシンプルさです。 私にとって、Next.js は、React アプリの作成と Gatsby の間のどこか…完璧な抽象化された量を持っています。 Webpack やルーティングを知る必要はありませんが、Node と一緒に React を行う意見に縛られることもありません。
Next.js は背景に溶け込むだけなので、コンポーネントの構築に集中でき、静的（または SSR）ウェブサイトをすぐに出荷できます。
とにかく、他の Reddit 画像ウェブサイトやアプリはたくさんありますが、私はいつも自分自身を作りたいと考えています。
Reddit 画像ビューアー アプリは、プラットフォームとして Next.js を使用し、React Hooks useEffect()と useState()、データの取得にネイティブ Fetch、任意の subreddit のメディアの遅延ロードに React Cool Image に依存しています。 また、カードとグリッドをスタイリングするために Tailwind CSS をフックしました。
Challenges
ウェブ ブラウザがクロスサイト コンテンツにますます厳しくなっているので、CORS を扱うような、いくつかの困難がありました。 幸運にも、CORS Anywhere を使用してこれを回避することができました。
埋め込み用の JSON を解析することも困難でした。 Reddit はあらゆるタイプの埋め込みメディアを許可するので、特定のタイプのメディアをチェックし、表示できるようにすることは、間違いなく楽しい小さな挑戦で、結局スイッチ ステートメントを構築することになりました。 Reddit は動画のようなリッチメディアをエンコードするので、マークアップをレンダリングする前に、それを <textarea> にデコードしなければなりませんでした。
私は「ライブ検索」機能がとても好きですが、誰かが文字を入力するたびに API を叩くのはうまくいきません。 私は useDebounce() という別の React Hook を使用して、フェッチ要求を送信する前に検索バーを 1 秒間待機するように強制しました。 React コンポーネントでインライン if/else ステートメントを実行する方法です! このトピックは、独自のブログ投稿に値するものであり、React Suspense に非常に興奮させられます。 追加したい機能拡張のために、すでに Github でいくつかの issue を開いています。 全体として、楽しい学習体験でした！
Github でコードをチェックアウトし、ここでライブ アプリを表示します。 https://reddit-image-viewer.vercel.app