Projects/Keramische Tegel Shop

Keramische Tegel Shop

Headless WP & Next.jskeramischetegelshop.nl

Goal

Building a webshop with Next.js for a client, with product management in a headless WordPress environment.

Technologies

  1. TypeScript: First time really using TypeScript.
  2. Next.js: Worked with it before, but not for such a big website.
  3. Headless WordPress: First time using WordPress as a headless CMS.
  4. Mollie: Payment provider (via WooCommerce in WordPress).
  5. Tailwind CSS: Used for styling.

Most Important Lessons

1. I wouldn’t use WordPress as a headless CMS again.

Even though it worked as expected, it wasn’t nice to work with. I wanted to use GraphQL, but the WordPress plugin for GraphQL didn’t provide a great developer experience.

  • Their website was super slow for documentation.
  • It was difficult to add things to the schema.

The endpoint wasn’t fast either. While this didn’t affect performance due to prerendered pages, the build time became an issue. With many products, prerendering was necessary to ensure users wouldn’t wait on non-prerendered pages.

Next time:
I would use my own Postgres database with a custom admin panel to better suit client needs.


2. Start with a plan, not just dive into coding.

I jumped into coding immediately without thinking smaller. This caused the first version of the website to lack:

  • Optimized component splitting.
  • Better reuse of logic.

Next time:

  • Create a good plan.
  • Think through the components and utilities needed.
  • Focus on reusability while coding.

3. Was Tailwind CSS the right choice?

Probably not. It was nice to work with, but the website ended up with a "Tailwind look" rather than a custom design.

Next time:
I’d still use Tailwind CSS for personal projects (e.g., my portfolio), but for this type of project, a more custom styling solution might be better.


Repository

The repository of this project is currently private.