Nextjs Templates & Themes Logo Nextjs Templates & Themes
Next Image Gallery screenshot

Next Image Gallery

Author Avatar Theme by Lelouchb
Updated: 29 Jul 2023
38 Stars

Image Gallery built with Next.js, Pexels API and Chakra UI.

Github Live Preview

Categories

React Chakra ui

Overview

Next Image Gallery is a project built with Next.js using the Pexels API and Chakra UI. It provides a user-friendly image gallery that can be easily deployed with Vercel. This Next.js project can be customized and modified according to the user’s needs.

Features

  • Next.js framework for efficient server-side rendering and routing
  • Integration with the Pexels API to fetch and display images
  • UI components built with Chakra UI v1 for easy customization and theming
  • Auto-updating page that reflects changes made to the code in real-time
  • Ability to modify and personalize the image gallery by editing the pages/index.js file

Installation

To install and run the Next Image Gallery project, follow these steps:

  1. Visit https://www.pexels.com/api/new/ and create a new API key.
  2. Rename the file .env.example in the project directory to .env.local.
  3. Open the .env.local file and add the API key obtained from Pexels API as the value for the API_KEY variable.
  4. Install the project dependencies by running the following command in the project directory:
npm install
  1. Start the development server by running the following command:
npm run dev

  1. Open your browser and visit http://localhost:3000 to see the image gallery.

  2. You can now customize the gallery by modifying the pages/index.js file. Any changes made to the file will automatically update the gallery.

Summary

Next Image Gallery is a Next.js project that provides a user-friendly image gallery with features such as live updating, Pexels API integration, and customizable UI using Chakra UI v1. It can be easily installed and deployed with Vercel, making it a convenient solution for showcasing images in a professional and visually appealing way.