A friend of mine works as a local mattress retailer and asked me to help update his website. Specifically, he wanted to modify the opening hours. I found an old HTML file on his server, which provided a perfect opportunity to test some new tools. I redirected the domain bettenbauernfeind.de to one of my cloud servers and started working on it.
Architecture
For the backend, I chose Strapi, a headless content management system. The website’s front page had a small info section, and I thought it would be useful to let my friend edit the text himself. This decision has proven beneficial, as adding new types of content is now very straightforward.
The client is built with Next.js, which pairs perfectly with a headless CMS. Next.js provides essential features like pages, data fetching, and even image optimization. Below is an example of server-side rendering when the page loads. Props are automatically passed to the default function 🚀.
export async function getServerSideProps() {
const res = await fetch(`/api/frontpage-info`);
const { data } = await res.json();
return { props: { info: data } };
}For styling, I used Tailwind.css. To ensure secure and stable delivery, a Caddy server runs on a virtual Linux machine. Overall, I’m very pleased with this setup and look forward to further improving the website.