Spectrum - a Multifaceted Photo

I noticed some new lights along a wall in the downtown Reno corridor the other evening while riding my bike. The lights caught my attention because they were configured to glow in a spectrum of colors.

ViewFull Size View on Unsplash

# of views: 63,586

After stopping to take a closer look, I pulled out my camera to capture a few photos, one of which is displayed above with a silhouette of a person's legs created by the lights. I saw this moment—specifically, the light configuration that created a silhouette—as a reminder of how people are multifaceted. Whether it's in day-to-day life interactions or, even, for example, creating digital products, I feel it's important to take stock in someone's composite nature to help guide us in the pursuit of better understanding one another.

Guillermo Rauch@rauchg

@ChiahauHu @vincentriemer Static site generation. What people mostly want is the data in one hop. SSR can do it, but from a distant origin. SSG can do it from an edge close to you.

Loading...

Statically displaying a dynamic photo

For the curious, the highlighted, image above is actually pulled-in using Unsplash's API.

• Next.js' getStaticProps allows me to make a remote request of a specific picture along with its relevant metadata, e.g. how many times it has been viewed, downloaded, or starred.
• Upon deploying to production, this markdown page is packaged statically to help reduce performance load.

Fetching an Unsplash image using their API

The following is a TypeScript code snippet I've implemented on how to make a request to the Unsplash API for a particular photo.

// Some service library in your project, e.g. @/lib/unsplash.(js|ts)
import { createApi } from 'unsplash-js';
 
export const fetchSingleUnsplashImage = async (id: string) => {
  let resultData;
  let resultError;
  try {
    const accessToken = process.env.UNSPLASH_ACCESS_TOKEN;
    if (!accessToken) throw new Error(`No Unsplash access token defined`);
 
    const unsplash = createApi({ accessKey: accessToken });
 
    // @see https://github.com/unsplash/unsplash-js#response
    resultData = await unsplash.photos.get({ photoId: id }).then((result) => {
      if (result.errors) {
        // handle error here
      } else {
        // handle success here
        return result.response;
      }
    });
  } catch (e) {
    ...
    // Handle catch
  }
 
  return {
    results: resultData,
    errors: resultError,
  };
};

Piecing it together

1. Create an app/project in Unsplash's Developer Dashboard to generate an access token.

2. On the server/static-side, fetch the photo from Unsplash (using your access token and the photo's ID) and pass it to the page's props, e.g.

   // pages/index.tsx
   import { fetchSingleUnsplashImage } from '@/lib/unsplash';
    
   type Props = {
     photo: UnsplashPhoto,
   };
    
   export const getStaticProps = async () => {
     // https://unsplash.com/documentation#get-a-photo
     const { results } = await fetchSingleUnsplashImage('YourPicturesID');
    
     return {
       props: {
         photo: results,
       },
     };
   };
   //...

3. Pass the response payload to the client-side where it can [be rendered][#demo-photo] along with any other metadata (e.g. view count, download links, etc.) using a React componentand and or HTML tags such as the img tag.

   // pages/index.tsx
   //... getStaticProps
    
   type Props = OtherPropTypes & {
     photo: UnsplashPhoto,
   };
    
   const StaticUnsplash = ({ photo }: Props) => {
     return (
       <div class="photo">
         <img
           width={photo.width}
           height={photo.height}
           src={photo.urls.regular}
           alt={photo.alt_description}
         />
         <p>
           <a download href={photo.links.download}>
             Download
           </a>
         </p>
       </div>
     );
   };
    
   export default StaticUnsplash;

I hope you enjoy the picture, my perspective on it, and the high-level method for sharing any of your Unsplash photos on your own website (or wherever you fancy).

Resources:

• Unsplash API
• Unsplash JS package
• Next.js: Server-side Rendering vs. Static Generation
• HTML Docs on MDN