Unsplash Next.js Search

nextjs_logo
unsplash-logo

This is a working example of a next.js app using state to render an array of images utilizing the virtual DOM.
The project also uses the fetch() api which provides asynchronous requests with the use of promises.
The design & layout is based on my previous vanillajs project unsplash-js-search.
My blog post for unsplash-js-search has more information regarding design aspects & working with the unsplash api.

Main Features

  • Stateful Components
  • Loading Feedback
  • Async API Requests
  • API Key Seperated Using .env.local
  • Conditional Rendering
  • Virtual DOM

unsplash_nextjs_screenshot

Requirements

Getting an API Key

In order to make any requests you will need to signup to unsplash as a developer & request an API key.

Adding API Key to App

Add unsplash developer key to .env.local file in the base directory of the project.

NEXT_PUBLIC_API_CLIENTID = "insert-api-key-here";

The source for this project is available on github.

unsplash-nextjs


Cascading Grid

I decided to improve the look of the image results with a cascading grid which places elements based on vertical space.

unsplash_nextjs_grid

This allows the images to be viewed using the original aspect ratio.

Cascading Grid Feature Added Apr 6, 2021

The source for this project is available on github.

unsplash-nextjs