Bam another tool update…
and honestly it’s all the team’s fault.
They keep putting out more things for us to track 🤣

This post is going to be a bit more technical.
I want to take you along with the stuff I’m learning.
And if you didn’t know already… that’s one to the important parts of building these tools for me. I love helping the community. I love giving insight.
But for me this is also a place to learn and experiment.

So before we dive into all my tech rambling, here is the simple update:

Jackpot cards added

The jackpot cards are now added to the site:
👉 https://spl-jackpot-prizes.vercel.app/jackpot-prizes

You can now see how many jackpot cards are left in the Gator bucket.
Super useful info for the hunters out there.

Alright… let’s get into the nerdy stuff.

Why I build "small" tools

I get this question a lot:
“Why don’t you combine everything into one tool or one landing page?”

Trust me… I want to. At some point I will.
But right now I’m still really dialing in my understanding of Next.js.

At this moment I can build what I want. Together with AI I understand most of it and I ship it.
But maintainable, scalable code is a whole different story.

With my current experienced that i already gained, i want to start over with the land tool 🤣

That’s why I make these smaller side sites.
They let me experiment with patterns and new Next.js features
without needing to overhaul a massive codebase every time.

Step 1: API Route Pattern

One of the first approaches I used was the API Router Pattern.
And i know i found a hammer and everything is a nail at this point 🤣

What that means

A short description:

You build API endpoints inside your app/api/... folder.
Then your components call them via fetch() in a useEffect.
Everything happens client-side.
The page loads.
Then the browser fetches the data.
It works but it doesn’t use the real power of Next.js server features.

This pattern makes sense when your site is also meant for 3rd-party access,
because your data lives in those API routes.
That’s basically how my land tool was built.

It also includes my own custom node caching logic… something I also want to improve.

just a example of different route types:

Step 2: Hooks for data loading

The next step was using custom hooks.
Hooks let me control loading states, reuse logic, and make the UI feel more responsive.

Still client-side. But more organized.

This is the pattern the land tool uses today.

Experimenting with server-side Next.js features

For the smaller tools I started to explore what Next.js really offers.

• Server Components.
• Server Actions.
• Native caching.
• Suspense.
• Skeleton loaders.

Server-side Rendering (short version)

Short description:

Server-side Rendering means the server fetches the data
and renders the HTML before it reaches the browser.
The user sees the result instantly.
No loading spinners while the browser fetches things.
It’s great for performance and SEO.

So now I’m slowly moving toward:

• Less API routes.
• More server components.
• More server actions.
• More caching.
• Faster pages.

Server Actions + Hooks (my current mix)

I’m using server actions for some operations
and hooks for interactivity like loading states and refreshing.

At the same time I’m learning how to use Suspense
so the UI shows skeleton loaders while waiting for server components.

There is so much possible.
Picking the right thing for the right moment is the hard part.
That’s why I keep experimenting on small sites.

Next.js 16 Caching

In these smaller apps I’m now using the new default caching system in Next.js 16.

For the jackpot update I used:

  'use cache'
  cacheLife('hours') // stale: 5min, revalidate: 1hr, expire: 1day 

This means:

• stale: the cached data is allowed to be shown even if a refresh is needed
• revalidate: Next.js refreshes the data in the background
• expire: after this time the cached entry is fully invalid

Short explanation of these terms

Stale
The data is “old” but still safe to show.
The user gets a fast response.

Revalidate
A background refresh is triggered.
The next user (or next reload) sees fresh data.

Expire
The data is too old.
Next.js forces a new fetch before serving it again.

This fits the jackpot card data perfectly
because the values don’t change every few seconds.

Theming… my current nightmare (Hydration Errors)

The one thing I’m still struggling with is theming.

Client side themes.
Server side themes.
Hydration errors.
The server and client disagreeing on what the UI should look like.

This part is messy.
But I’ll tackle it after this experiment phase.

When I finally feel confident…
I’ll take on the big one:

• Combine all tools into one platform
• and rebuild the land tool with the new patterns.

Final thoughts

These are just some of the things I’m learning, fighting, or experimenting with.
And honestly… I’m enjoying it a lot.
Every tool I build teaches me something new.
And hopefully the players benefit from the improvements along the way.

Thanks for reading and hope to see you all on the battlefield.
Beaker 👋

Do you also want to be part of this amazing play to earn game consider using my refferal link.