Portfolio

React, Headless CMS, GraphQL, NextJS
Portfolio

Portfolio

React, Headless CMS, GraphQL, NextJS

When it came time to rebuild my outdated portfolio site, I wanted to try out a concept I had not experimented with yet. While reading more about NextJS I saw that the getStaticProps function would allow me to build a static site from data managed in a separate CMS. I was intrigued by this concept because I could offer a familiar solution such as WordPress for the backend and NextJS for the frontend. One caveat to this process is the NextJS site needs to be redeployed after every edit; however, by integrating hooks provided by my hosting platform, this process is automated.

This portfolio site queries data using GraphQL from a headless CMS called Hygraph. Dynamic routes such as the project pages are generated by calling the getStaticPaths function on build. Finally, the WordPress site is secured so that the CMS front end is only accessible if a user is authenticated. Otherwise, the user is redirected to this next application.