This is a Movies App built using Next.js, React and The Movie Database (TMDB) API.
A live deployment of this app is available to try it out.
Contributions are always welcome!
For large changes, please file an issue to discuss your proposed changes with us before working on a PR :)
Clone and install the dependencies for next-movies locally:
git clone https://github.com/tastejs/next-movies.git
cd next-movies
npm install- Take a copy of .env.local.example and re-name to .env.local
- Get your TMDb API key
- Get your TMDB API read access token
- Enter the details into the .env.local file
npm run dev: dev buildnpm run build: production buildnpm run static-build: production static buildnpm run start: start the projectnpm run vercel-deploy: deploy to vercelnpm run netlify-deploy: deploy to netlifynpm run analyze: bundle analysis- (
analyze:serverandanalyze:browserare available too)
Built with:
- Next.js
- Redux and Redux Thunk
- react-glider
- react-lazyload
- react-modal-video
- react-scroll
- react-select-search
- redaxios
- use-dark-mode
- @artsy/fresnel
- @loadable/component
In most cases, we strongly recommend using the next/image component for optimizing how you load images. For the next-movies app, there are a few app-specific reasons we currently don't use the component. Using react-lazyload, we lazy-load the entire MovieListItem component (for example), where elements like the movie name and star ratings don't load until they get near the viewport. This behavior is currently not possible with next/image. In the future, there may be more "Suspense"-y ways of approaching images in React/Next, which would make this type of pattern more first-class. Until then, check out our approach, but you'll likely be otherwise be able to make next/image work for you.
Based on the original create-react-app foundation by @fidalgodev.