I've been running a Minecraft server for years. For a while, I relied on a Facebook Group with some static information in the description for players to reference, like the server address - but then I deactivated my Facebook account and this information needed a new home.

Instead of creating another static page, I thought it'd be fun to set up a new dynamic page with live data about my server. Vercel's Next.js makes this easy by providing a method for fetching data server-side called getInitialProps! Note: This method has been deprecated in favor of getStaticProps. I set this page up before that was introduced, however.

First, I tracked down an API service I could use. After a few dead ends, I landed on mcapi. They provide a JavaScript library that returns a bunch of stats, including the server name, artwork, and number of players currently online. Using the previously mentioned getInitialProps, I'm able to pass all these stats as props to my page with just four lines of code:

MinecraftStatusPage.getInitialProps = async function () {
  const res = await fetch("https://mcapi.us/server/status?ip=dynoland.space");
  const data = await res.json();
  return { ...data };
};
              

I have a custom domain for my server, dynoland.space, so I'm able to pass that in as the IP address to request the data.

I like the idea of mixing live data with natural language. It's relatively easy to dump a bunch of stats into a table and call it a day, but I wanted this status page to be more welcoming than that - so I outlined a page similarly to how I'd write a blog post, then layered in the server stats. For example, instead of displaying my current server version like this:

I wrote a full paragraph with some additional context:

We're running version 1.15.2 of Minecraft, so you will need to ensure your client matches. Follow the directions on the Changing game versions support page if it doesn't.

Another example - if my server is online, I don't display that in any way. It's implicit. If my server is offline, however, the title of the page updates to say “Dynoland Is Offline”, and an additional paragraph is displayed:

If you were planning on playing right now, message me and I will look into it as soon as I'm available.

The last detail I'll mention is the button that players can click to quickly copy the server address to their clipboard. Why not save a few steps!

Check out the final status page here, and let me know if you'd like to join!

Published almost 4 years ago