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

2024 UPDATE

We're nearing the release date of Next.js 15, and we think it's time for you to start learning something better. Check out our article where we guide you through migrating from Next.js Pages Router to the new App Router for improved performance.

Next.js 13 Upgrade

We're thrilled to share that our digital presence has undergone a significant transformation and our website is not the same. Embracing the innovative features of Next.js 13, including the App Dir and React Server Components, paired with the versatility of Statamic with GraphQL, our website has evolved, mirroring the dynamic and ever-changing flow of a river.

Why the Upgrade?

Curiosity and the pursuit of excellence fuel our passion for growth. Our journey of exploration prompted us to transition from Sanity CMS to the vibrant ecosystem of Statamic. This strategic move is reminiscent of relocating from the constant hum of a metropolis to the tranquility of pastoral landscapes, granting us unparalleled control and a more intimate, authentic editing experience.

Bespoke Design with Building Blocks

Our commitment to a tailor-made approach is evident in our use of Building Blocks, our website's foundational elements. Just like the nostalgic joy of constructing with LEGO, these blocks empower us to sculpt each webpage into a unique digital art piece, providing the versatility and creativity to assemble a web experience as distinctive as a LEGO creation.

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.

Conclusion

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.