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

2025 UPDATE

We think that with the release date of Next.js 15, 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 excited to announce that our online presence has been greatly transformed, and our website has changed a lot. We’ve adopted the new features of Next.js 13, like the App Dir and React Server Components, along with the flexibility of Statamic with GraphQL, making our website as lively as a river.

Why the Upgrade?

Curiosity and the drive for being the best inspire our growth. We moved from Sanity CMS to the lively world of Statamic because we wanted to explore more. This shift is like leaving the nonstop noise of a city for the peace of the countryside, helping us have more control and a more personal, genuine editing experience.

Bespoke Design with Building Blocks

Our dedication to a custom approach shows in how we use Building Blocks, the basic parts of our website. Like the fun of building with LEGO, these blocks let us shape each webpage into a one-of-a-kind digital creation. They give us the flexibility and creativity to put together a web experience as unique as a LEGO project. This is all easily doable with Statamic CMS.

Custom Statamic features

Statamic is like a Swiss army knife for us, letting us add many custom features that we couldn’t do before. Here’s a quick look at some of the cool things we’re doing with it:

1. Server-side Code Highlighting with Shiki: This cool feature lets us make our code look nicer, making our technical documentation more interesting and better looking.

2. Self-hosted LLM for Form Entries: We’re using a self-hosted LLM to sort through form entries and spot spam, an issue we often run into. To make our work smoother, we sort each form into groups like leads, support, employment, etc.

3. Streamlined Form Management: All our forms go directly to Statamic now. It’s like having an online mailroom where our team can quickly see what’s new, making it easier to handle forms and respond faster.

4. Single Source of Truth: All our content is in Statamic now. This has made it really easy for our team to manage content, making sure everything on our website is consistent and correct, and saving us time on updating and changing content.

We’ve also added Framer Motion for page transitions, making our website more dynamic and interactive.

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

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.