Our senior capstone project involves the redevelopment of the Soundbendor Lab website. The goal of our project is to create a modular and customizable website for the client, so it is easy for them to change things as they see fit, while having the front end be static, so as to not hike up any unnecessary hosting and server costs. To achieve this goal, we have been using NextJS for the front-end and Strapi for the back-end of the website, both of which I have found enjoyable and pretty easy to use.
NextJS is a React-based framework for building server-side rendered and statically generated web applications. It is built on top of Node.js and provides a simple and streamlined way to develop web applications that are both fast and scalable.
What sets NextJS apart is its ability to automatically optimize and serve your pages for the best performance. It pre-renders the HTML for each page on the server and then serves it to the client, providing a fast and seamless experience for users. This also makes it easy to create web pages that are SEO-friendly and accessible to a wider audience. In addition to its performance optimizations, NextJS also provides a range of features and tools for building complex web applications, such as automatic code splitting, dynamic imports, and serverless functions.
I will note, my prior knowledge with React definitely played a role in my ability to learn and use NextJS effectively. As React is a JavaScript library for building user interfaces, which is in essence was NextJS is, it allowed me to quickly pick up the core concepts and features, such as the component-based architecture of NextJS.
Strapi is an open-source headless content management system (CMS). A headless CMS is a back-end only content management system, which allows you to store and manage your content, and then deliver it to any platform or device. What sets Strapi apart is its user-friendly interface and highly customizable architecture. It provides an intuitive way to manage and organize content, making it easy to add, change, and update any content on the site. This makes it the perfect choice for our senior capstone project, as it allows us to build a modular and customizable back-end for the Soundbendor Lab website.
While both Strapi and NextJS are user-friendly and pretty easy to use, connecting them together did have a slight learning curve. Integrating a headless CMS like Strapi with a static front-end framework like NextJS requires a deeper understanding of both technologies and how they work together. Currently, our solution has been to create a json file “package” of the modular content using Strapi and passing it to our NextJS front-end as a static database for it to pull from.
While we’ve figured out creating the content using Strapi and displaying the content statically using NextJS, we are still working on automating the process of downloading the json file when content is updated and then uploading it to our Media Library folder. While downloading and placing a single file into a specific folder in Strapi is not difficult, and our client has stated website content is not updated very often so this small step wouldn’t be too much of an inconvenience, it is still our plan to try to automate this process if time allows.
In conclusion, both NextJS and Strapi have been invaluable tools for our senior capstone project. NextJS’s performance optimizations and powerful development tools have allowed us to build a fast and scalable static front-end for the Soundbendor Lab website, while Strapi’s user-friendly interface and highly customizable architecture have made it the perfect choice for building our back-end. I would highly recommend both of these technologies to anyone looking to build a modern and modular static web application.
