Upgrading to Next.js 13 with App Dir, React Server Components and Statamic

We're excited to announce that we've upgraded our website to use Next.js 13 with App Dir, React Server Components, and Statamic with GraphQL. Much like a river shapes its course over time, we are continually growing, learning, and perfecting our craft.

Why the Upgrade?

You might be wondering why we decided to make this move. Well, the answer is simple: we love to explore. Our exploration led us to say goodbye to Sanity CMS and welcome the fresh vibe of Statamic into our technological arsenal. The shift was akin to moving from a bustling city to a serene countryside - we now have much more control, and the editing experience is more personal, more us.

Building Blocks: The LEGO of Our Website

We pride ourselves on our bespoke approach, which is why we build every page on our website using Building Blocks. You remember playing with LEGO blocks as a kid, right? Well, it's pretty much like that. The blocks provide us with different components, allowing us to construct each page uniquely, just like assembling a LEGO masterpiece.

Unlocking Custom Functionalities with Statamic

Statamic is like a Swiss army knife for us, enabling a range of custom functionalities that were previously impossible. Here's a sneak peek into some of the cool stuff we're doing with it:

1. Server-side Code Highlighting with Shiki: This nifty feature lets us add a touch of flair to our code, making our technical documentation more engaging and visually appealing.

2. Self-hosted LLM for Form Entries: We're using a self-hosted LLM to automatically process form entries and detect if it's spam, a problem we face quite often. To streamline our processes, we categorize each form into different categories such as leads, support, employment, etc.

3. Streamlined Form Management: All our forms now go straight to Statamic. It's like having a virtual mailroom where our team can easily check what's new, simplifying our form-handling process and improving our response times.

4. Single Source of Truth: All our content now lives in Statamic. This consolidation has made content management a breeze for our team, ensuring that we maintain consistency and accuracy across our website while saving valuable time on content updates and revisions.

Spicing Up the Experience

As if these upgrades weren't enough, we've also incorporated Framer Motion for page transitions. This adds an extra layer of user experience, transforming our website into a dynamic, interactive space.

Keeping Content Fresh with Custom Commands

Finally, we've introduced a custom command on Statamic that revalidates the cache on Next.js every time a page or entry is saved. This means all content changes are instant, and we don’t have to rely on building the site for each content update.

Not so Frequently Asked Questions

1. Why did you switch to Statamic from Sanity CMS?

We made the switch because we found that Statamic offers more control and a better editing experience. We use Statamic for all our client websites, and it was about time we use it for our own website.

2. What are Building Blocks?

Building Blocks are like LEGOs for our website. They are different components that allow us to construct each page uniquely. It allows us to make as many modifications as we want without breaking the original design.

3. What is the benefit of using Framer Motion?

Framer Motion enhances the user experience by introducing dynamic, interactive page transitions that come to life as you navigate through our website.

Wrap up

Do you have a project in mind that needs the expertise of Next.js and Statamic?

We're here to help! Reach out to us today, and let's create something amazing together.

Bring Your Ideas to Life 🚀

Kickstart Your Statamic Project with the #1 Statamic Agency

Are you planning a new Statamic project or thinking about migrating your WordPress site to Statamic? Learn more about our expertise as a renowned Statamic development agency.

Lucky Media is proud to be recognized as the #1 best Statamic Agency by Clutch, a leading B2B ratings and reviews platform.

Our Services and Specializations

At Lucky Media, we offer a range of services including website development, web application development, and mobile apps development. We specialize in Statamic, React Native, Next.js, AI and ML solutions. We also provide staff augmentation and TALL stack development services.

Case Studies: Our Work in Action

For more insights into our work, check out our case studies on revolutionising lead generation with AI, customized coaching site, healthcare digitization, next-level performance, lead generation and patient journey, WordPress to Statamic migration, and improving user experience. These case studies provide a glimpse into how we tailor our technology choices to meet specific client needs and deliver exceptional results.