https://github.com/pnvdev/nextjs-movies
This is a Next.js application that allows users to search for movies using the TMDB API. It fetches movie data based on user queries and displays the results in a responsive grid layout.
https://github.com/pnvdev/nextjs-movies
nextjs serverside-rendering tmdb urlsearchparams
Last synced: 3 months ago
JSON representation
This is a Next.js application that allows users to search for movies using the TMDB API. It fetches movie data based on user queries and displays the results in a responsive grid layout.
- Host: GitHub
- URL: https://github.com/pnvdev/nextjs-movies
- Owner: pnvdev
- License: mit
- Created: 2024-08-16T03:46:42.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-08-16T04:42:29.000Z (11 months ago)
- Last Synced: 2025-01-28T02:16:58.701Z (5 months ago)
- Topics: nextjs, serverside-rendering, tmdb, urlsearchparams
- Language: TypeScript
- Homepage: https://nextjs-movies-tau-brown.vercel.app
- Size: 22.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js Movies
This is a Next.js application that allows users to search for movies using the TMDB API. It fetches movie data based on user queries and displays the results in a responsive grid layout.
## Features
- **Search Functionality: Users can search for movies by title using URL search parameters instead of useState, allowing direct linking to specific searches.
- **Debounced Search:** The app uses debounced input to minimize unnecessary API calls.
- **Responsive Design:** The layout adapts to different screen sizes.
- **Dynamic Routing:** Each movie links to a detailed page using Next.js dynamic routing.
## Tech Stack
- **Next.js:** Framework for server-side rendering and static site generation.
- **Tailwind CSS:** Utility-first CSS framework for styling.
- **TypeScript:** For type-safe JavaScript development.
- **TMDB API:** Used to fetch movie data.
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/pnvdev/nextjs-movies.git
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) to see the app in action.
## Environment Variables
To run this project, you will need to add the following environment variables to your `.env.local` file:
```env
NEXT_PUBLIC_TMDB_API_KEY=your_tmdb_api_key
```
## Deployment
This app can be easily deployed on Vercel, the platform from the creators of Next.js.
## License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
## Acknowledgements
- Thanks to [TMDB](https://www.themoviedb.org/) for providing the movie data API.