New Website with Next.js and Strapi

A friend of mine is working as a local mattresses retailer and asked me to help out with his website. Basically he just wanted to change the opening hours. I found an old html file on his server. This was a perfect opportunity to test out some new stuff so I redirected the domain bettenbauernfeind.de to one of my cloud servers and started to work.

Architecture

For the backend I chose Strapi which is a headless content management system. There was a little info section on the frontpage and I thought it would be cool to enable my friend to edit the text by himself. Right now we really profit from this decision because including new types is really easy.

The client is based on Next.js and this is really the perfect combination with a headless cms. You have everything you need like pages, data fetching or even image optimization. Here is an example for server side rendering when the page gets loaded. Props are automatically passed to the default function 🚀.

export async function getServerSideProps() {
    const res = await fetch(`https://backend.bettenbauernfeind.de/api/frontpage-info`)
    const { data } = await res.json()

    return { props: { info: data } }
}

For the styling I`m using Tailwind.css and to deliver everything secure and stable a Caddy server is running on a virtual Linux machine. In a nutshell I’m really happy with this setup and looking forward to further improvements of this website.