This repository contains a Next.js project focused on generating and displaying thumbnails. Thumbnails are small, scaled-down versions of images that provide a quick preview of the original content. This project is a simple example of how you can use Next.js to efficiently generate and serve thumbnails for your images.
Follow these instructions to get the project up and running on your local machine.
- Node.js (v14 or higher)
- npm (Node Package Manager) or yarn
-
Clone the repository to your local machine:
git clone https://github.com/abdorhl/youtoubthum.git
-
Navigate to the project directory:
cd nextjs-thumbnail-project
-
Install the dependencies:
If you're using npm:
npm install
If you're using yarn:
yarn install
-
Place your original images in the
public/images
directory. -
Run the development server:
If you're using npm:
npm run dev
If you're using yarn:
yarn dev
-
Open your web browser and go to
http://localhost:3000
to see the application in action.
You can customize the thumbnail generation settings by modifying the utils/thumbnailGenerator.js
file. Adjust parameters such as thumbnail size, quality, and any additional processing.
nextjs-thumbnail-project/
├── public/
│ ├── images/ # Place your original images here
├── utils/
│ ├── thumbnailGenerator.js # Thumbnail generation logic
├── pages/
│ ├── index.js # Main page displaying thumbnails
├── components/
│ ├── Thumbnail.js # Thumbnail component
├── styles/
│ ├── GlobalStyles.js # Global styles
├── README.md # Project README (you are here)
├── package.json # Node.js dependencies and scripts
└── .gitignore # Git ignore configuration
Contributions to this project are welcome! If you find any issues or have ideas for improvements, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.
Happy thumbnailing! If you have any questions or need further assistance, don't hesitate to reach out.