How to use Unsplash API to get images

Unsplash API is simple to use. Here are the steps to get started:

1. Create a developer account: create an account -> https://unsplash.com/join
2. Once you’re in, go to the Menu -> Product -> Developers/API
3. Click on Your Apps
4. Click on New Application, and genuinely agree to the guidelines
5. Add your application’s name and description
6. Then you’ll see “Apply for Production” section, but we’re not interested in that yet, so let’s scroll down to 🔑 Keys section (this is where you’ll need to copy your Access key for API requests)
7. At the bottom 🔒Permissions section, select what you’ll want for your app (you can select all of them if you want to explore all that the API allows).

For the purpose of this blog post I only selected 3: Public access, Read photos and Read collections access.

That’s it, you’re all set!

I’ll share an example with Next.js of how to fetch data and display images.

This is using query “red panda”

1. Save you Access token in .env.local (this is your Access key from 🔑 Keys section)

Create .env.local and .env.local.example files in your root dir.

// env.local
NEXT_PUBLIC_UNSPLASH_CLIENT_ID="your-token-here"


// env.local.example
NEXT_PUBLIC_UNSPLASH_CLIENT_ID=

Make sure you have in your .gitignore

# local env files
.env*.local

2. Fetch data using the token

I’m using axios and in src/api/unsplash.ts I’ll add all my API functions.

import axios from 'axios'

const clientId = process.env.NEXT_PUBLIC_UNSPLASH_CLIENT_ID

const UNSPLASH_ROOT = 'https://api.unsplash.com'

export const getPhotosByQuery = async ({ query }: { query: string }) => {
  const { data } = await axios.get(
    `${UNSPLASH_ROOT}/search/photos?query=${query}&client_id=${clientId}&per_page=20`
  )
  return data
}

In src/hooks/useUnsplash.ts I’ll add a data fetching hook:

import {getPhotosByQuery} from '@/api/unsplash'
import { useQuery } from 'react-query'

const staleTime = 1000 * 60 * 60 * 2

export const useGetPhotosByQuery = ({ query }: { query: string }) =>
  useQuery(query, () => getPhotosByQuery({ query }), {
    staleTime
  })

3. Display the data

In a component src/components/unsplash/Unsplash.tsx

import { Container, ImageContainer, StyledImage } from './Unsplash.style'
import { Photo } from '@/types/unsplash'
import { useGetPhotosByQuery} from '@/hooks/useUnsplash'

const query = 'red panda'

export const Unsplash = () => {
  const { data } = useGetPhotosByQuery({ query })
  const photos = data?.results || data

  return (
    <Container>
      {photos?.map((item: Photo) => (
        <ImageContainer key={item.id}>
          <StyledImage
            src={item.urls.small}
            alt="Unsplash image"
            width={300}
            height={300}
          />
        </ImageContainer>
      ))}
    </Container>
  )
}

and this is my css file:

import styled from 'styled-components'
import Image from 'next/image'

export const Container = styled.div`
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
`

export const ImageContainer = styled.div`
  padding: 1rem;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
`

export const StyledImage = styled(Image)`
  object-fit: cover;
`

So this is a super simple way to access photos by query using Unsplash API (https://unsplash.com/documentation#search)

There is a ton of other ways you can get photos from the API (get random photo, get collection photos, etc), show likes, download links, like photos, etc. It’s really up to you what you wanna build on top of it!

Thanks for reading! 😊 Have fun with it!

oh, and before I forget, this is my next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com'
      }
    ]
  },
  compiler: {
    styledComponents: true
  }
}

module.exports = nextConfig

Even Medium is using it here to allow you to add images! 😊 You can build a feature to replicate that in your app.

Photo by Diana Parkhouse on Unsplash