Merge pull request #10 from bitfreee/feat/optimize-image

Optimize image

.env.example

@@ -2,6 +2,7 @@ NEXT_PUBLIC_APP_URL="http://localhost:3000"
 NEXT_PUBLIC_TMDB_TOKEN="eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3MmJhMTBjNDI5OTE0MTU3MzgwOGQyNzEwNGVkMThmYSIsInN1YiI6IjY0ZjVhNTUwMTIxOTdlMDBmZWE5MzdmMSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.84b7vWpVEilAbly4RpS01E9tyirHdhSXjcpfmTczI3Q"
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX"
 NEXT_PUBLIC_SITE_NAME="MovieWeb"
+NEXT_PUBLIC_IMAGE_DOMAIN=image.tmdb.org
 NEXT_PUBLIC_TWITTER="https://twitter.com/"
 NEXT_PUBLIC_FACEBOOK="https://facebook.com/"
 NEXT_PUBLIC_INSTAGRAM="https://instagram.com/"

.github/workflows/ci.yml

@@ -15,6 +15,7 @@ env:
   NEXT_PUBLIC_APP_URL: "https://fake.com"
   NEXT_PUBLIC_TMDB_TOKEN: "fake-token"
   NEXT_PUBLIC_SITE_NAME: "fake-name"
+  NEXT_PUBLIC_IMAGE_DOMAIN: "fake-domain"
 
 jobs:
   build:

README.md

@@ -15,11 +15,12 @@ A launching point for building a movie streaming website.
 ### Deploy with Vercel
 1. Click the button below to deploy the project on Vercel.
 
-- [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbitfreee%2Fmovie-web-kickstart&env=NEXT_PUBLIC_APP_URL,NEXT_PUBLIC_TMDB_TOKEN,NEXT_PUBLIC_SITE_NAME) 
+- [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbitfreee%2Fmovie-web-kickstart&env=NEXT_PUBLIC_APP_URL,NEXT_PUBLIC_TMDB_TOKEN,NEXT_PUBLIC_SITE_NAME,NEXT_PUBLIC_IMAGE_DOMAIN) 
 2. Fill in the required environment variables:
 - `NEXT_PUBLIC_APP_URL`: The URL of your deployed project (e.g., `https://movie-web-kickstart.vercel.app`)
 - `NEXT_PUBLIC_TMDB_TOKEN`: Your TMDb API key (get it [here](https://www.themoviedb.org/documentation/api), or you can use default token in .env.example file for testing)
 - `NEXT_PUBLIC_SITE_NAME`: The name of your website (e.g., `MovieWeb Kickstart`)
+- `NEXT_PUBLIC_IMAGE_DOMAIN`: The name of your website (e.g., `MovieWeb Kickstart`)
 
 3. Click "Deploy" and wait for the deployment to complete.
 

next.config.mjs

@@ -2,7 +2,7 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
-await import("./src/env.mjs");
+const { env } = await import('./src/env.mjs');
 
 /** @type {import("next").NextConfig} */
 const config = {
@@ -14,12 +14,12 @@ const config = {
    * @see https://github.com/vercel/next.js/issues/41980
    */
   i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
+    locales: ['en'],
+    defaultLocale: 'en',
   },
   images: {
     unoptimized: true,
-    domains: ["image.tmdb.org"],
+    domains: [env.NEXT_PUBLIC_IMAGE_DOMAIN],
   },
   typescript: {
     ignoreBuildErrors: true,

src/components/hero.tsx

@@ -1,15 +1,16 @@
 'use client';
-import React from 'react';
-import { MediaType, type Show } from '@/types';
-import { useSearchStore } from '@/stores/search';
-import { Button } from '@/components/ui/button';
 import { Icons } from '@/components/icons';
-import Image from 'next/image';
-import { useModalStore } from '@/stores/modal';
-import Link from 'next/link';
+import { Button } from '@/components/ui/button';
 import { getIdFromSlug } from '@/lib/utils';
 import MovieService from '@/services/MovieService';
+import { useModalStore } from '@/stores/modal';
+import { useSearchStore } from '@/stores/search';
+import { MediaType, type Show } from '@/types';
 import { type AxiosResponse } from 'axios';
+import Link from 'next/link';
+import React from 'react';
+import Image from 'next/image';
+import { env } from '@/env.mjs';
 
 interface HeroProps {
   randomShow: Show | null;
@@ -62,7 +63,7 @@ const Hero = ({ randomShow }: HeroProps) => {
         <>
           <div className="absolute inset-0 z-0 h-[100vw] w-full sm:h-[56.25vw]">
             <Image
-              src={`https://image.tmdb.org/t/p/original/${
+              src={`https://${env.NEXT_PUBLIC_IMAGE_DOMAIN}/t/p/original${
                 randomShow?.backdrop_path ?? randomShow?.poster_path ?? ''
               }`}
               alt={randomShow?.title ?? 'poster'}

src/components/shows-carousel.tsx

@@ -8,6 +8,8 @@ import { cn, getNameFromShow, getSlug } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 import { usePathname } from 'next/navigation';
+import Image from 'next/image';
+import { env } from '@/env.mjs';
 
 interface ShowsCarouselProps {
   title: string;
@@ -124,16 +126,17 @@ export const ShowCard = ({
       {/*   } */}
       {/*   media="(min-width: 780px)" */}
       {/* /> */}
-      <img
+      <Image
         src={
           show.poster_path ?? show.backdrop_path
-            ? `https://image.tmdb.org/t/p/w500/${
+            ? `https://${env.NEXT_PUBLIC_IMAGE_DOMAIN}/t/p/w500${
                 show.poster_path ?? show.backdrop_path
               }`
             : '/images/grey-thumbnail.jpg'
         }
         alt={show.title ?? show.name ?? 'poster'}
         className="h-full w-full cursor-pointer rounded-lg px-1 transition-all md:hover:scale-110"
+        fill
         style={{
           objectFit: 'cover',
         }}

src/components/shows-modal.tsx

@@ -9,7 +9,6 @@ import {
   type VideoResult,
 } from '@/types';
 import Youtube from 'react-youtube';
-import Image from 'next/image';
 import { getMobileDetect, getYear } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { Button } from '@/components/ui/button';
@@ -22,6 +21,8 @@ import {
 import Link from 'next/link';
 import MovieService from '@/services/MovieService';
 import { usePathname } from 'next/navigation';
+import Image from 'next/image';
+import { env } from '@/env.mjs';
 
 type YouTubePlayer = {
   mute: () => void;
@@ -160,7 +161,7 @@ const ShowModal = () => {
             ref={imageRef}
             alt={modalStore?.show?.title ?? 'poster'}
             className="-z-40 z-[1] h-auto w-full object-cover"
-            src={`https://image.tmdb.org/t/p/original/${modalStore.show?.backdrop_path}`}
+            src={`https://${env.NEXT_PUBLIC_IMAGE_DOMAIN}/t/p/original${modalStore.show?.backdrop_path}`}
           />
           {trailer && (
             <Youtube

src/components/shows-skeleton.tsx

@@ -4,6 +4,7 @@ import { itemFade, itemsReveal } from '@/lib/constants';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
 import { useSearchStore } from '@/stores/search';
+import Image from 'next/image';
 
 interface ShowsSkeletonProps {
   count?: number;
@@ -44,7 +45,7 @@ const ShowsSkeleton = ({
                   {/*   media="(min-width: 780px)" */}
                   {/*   srcSet={'/images/grey-thumbnail.jpg'} */}
                   {/* /> */}
-                  <img
+                  <Image
                     alt={'poster'}
                     src={'/images/grey-thumbnail.jpg'}
                     className="h-full w-full cursor-pointer rounded-lg px-1 transition-all md:hover:scale-110"

src/env.mjs

@@ -24,6 +24,7 @@ export const env = createEnv({
     NEXT_PUBLIC_FACEBOOK: z.string().url().optional(),
     NEXT_PUBLIC_INSTAGRAM: z.string().url().optional(),
     NEXT_PUBLIC_YOUTUBE: z.string().url().optional(),
+    NEXT_PUBLIC_IMAGE_DOMAIN: z.string(),
   },
 
   /**
@@ -44,6 +45,7 @@ export const env = createEnv({
       process.env.NEXT_PUBLIC_INSTAGRAM ?? 'https://instagram.com',
     NEXT_PUBLIC_YOUTUBE:
       process.env.NEXT_PUBLIC_YOUTUBE ?? 'https://youtube.com',
+    NEXT_PUBLIC_IMAGE_DOMAIN: process.env.NEXT_PUBLIC_IMAGE_DOMAIN,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.

src/lib/utils.ts

@@ -152,7 +152,7 @@ export const handleMetadata = cache(
         type: 'website',
         locale: 'en_US',
         url: `${siteConfig.url}/${page}/${slug}`,
-        images: `https://image.tmdb.org/t/p/original/${
+        images: `https://${env.NEXT_PUBLIC_IMAGE_DOMAIN}/t/p/original${
           data?.backdrop_path ?? data?.poster_path ?? ''
         }`,
         title: getNameFromShow(data),
@@ -163,7 +163,7 @@ export const handleMetadata = cache(
         card: 'summary_large_image',
         title: getNameFromShow(data),
         description: data?.overview ?? '',
-        images: `https://image.tmdb.org/t/p/original/${
+        images: `https://${env.NEXT_PUBLIC_IMAGE_DOMAIN}/t/p/original${
           data?.backdrop_path ?? data?.poster_path ?? ''
         }`,
         creator: siteConfig.author,