diff --git a/.env.example b/.env.example index d6091e1..6cab44d 100644 --- a/.env.example +++ b/.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/" diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1b781c2..b8bcaf8 100644 --- a/.github/workflows/ci.yml +++ b/.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: diff --git a/README.md b/README.md index 10cb406..805ec35 100644 --- a/README.md +++ b/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. diff --git a/next.config.mjs b/next.config.mjs index 859872d..96ea9a4 100644 --- a/next.config.mjs +++ b/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, diff --git a/src/components/hero.tsx b/src/components/hero.tsx index 69ca803..8f1b6c8 100644 --- a/src/components/hero.tsx +++ b/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) => { <>
{randomShow?.title */} - {show.title 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 && ( */} -