I Created a SpaceX Website with Next.js and Here's What I Learned

To infinity, and beyond.

That is a quote from the infamous Buzz Lightyear. Honestly, the reason I put that quote is because of ✨space✨. This is my first article ever, I decided to make it because I want to share what I've learned while creating this website and I hope it helps or inspires someone out there to start creating. Any input is really welcomed!

So let's just get into it.

API

The API that I used on this project is SpaceX REST API, it's an unofficial Space-X REST API that has a considerable amount of data that you can use. You can show them some love or even better use this on your next project!

Framework

I've learned React for almost a year now, and in my quest to become a better developer, I'm dipping my toes into the Next.js pool with all the server-side rendering (SSR), static site generation (SSG), Easy routing, and other awesome things that come with it. That's it for the framework side of things.

Styling

As to how most people learned to create a website, in my early days of web development, I used Bootstrap and I've gotten pretty fluent with it. However, Bootstrap 4 is considered 'bloated' because of the jQuery package that it depends on. So, I tried using Tailwindcss because of its utility-first approach and its rising popularity among the developer community. tailwindcss also offers the solution to problems that I've had with Bootstrap such as a strong opinionated style that results in a website that looks very similar to each other when they are built with Bootstrap.

Other Tools/Packages

As a good website should give users an immersive and interactive experience, I tried to apply some animation to the website using framer-motion since upon the inspection I found that the package is really extensible and quite simple to use once you get the idea of how they work.

The API that I use serves a lot of data from SpaceX, so what is a better way to show a lot of data than using a table! Upon deep research that I've conducted (basically, google things up) I found that react-table is the best way for it.

Results

Here are some snapshots of the current final version of the website

The deployed web is available at https://spacex-data-showcase.vercel.app, and the code of the entire website itself is open-sourced at my GitHub (if you're interested you can drop a follow or star the repo, thanks! 😉).

The Good Stuff I Learned

Here are a few things I learned when creating this website.

Next.js server-side rendering

Let's start with Next.js, as previously mentioned Next.js support server-side rendering. This will improve your website discoverability (SEO stuff) on search engines because the server renders the HTML markup on page requests so all the stuff you write will be searchable by the search engine. Normally if you write a single page application or SPA, you will have a single `index.html` file that is empty and then the javascript bundle will render the corresponding page and/or components according to your URL and all the related things.

To create a server-side rendered page you simply export an asynchronous function from the component

//pages/rockets/index.jsx

...
Rockets.getInitialProps = async () => {
  try {
    const res = await spaceX.getAllRockets();
    return { rockets: res.data };
  } catch (error) {
    return { error };
  }
};
...

This code will make the server fetch the data from the API on page request so when someone visits https://spacex-data-showcase.vercel.app/rockets they would be able to access the page faster.

Data-fetching

To actually make a request to the REST API I used axios which is a 'Promise based HTTP client for the browser and node.js'. To use them, I created this file and import it to the page component above.

//services/spaceX.js

import axios from "axios";

//create an axios instance
const http = axios.create({
  baseURL: "https://api.spacexdata.com/v4",
  headers: {
    "Content-type": "application/json",
  },
});

//create a helper function for error handling
const withHandling = async (f) => {
  try {
    const fReturnVal = await f();
    return fReturnVal;
  } catch (error) {
    console.log(error);
    return "";
  }
};

//create a get request to https://api.spacexdata.com/v4/rockets
//this will then return an array of rockets that is available

const getAllRockets = async () =>
  withHandling(async () => {
    const res = await http.get("/rockets");
    return res;
  });

//export the function
export default {
  getAllRockets,
  ...
};

Conclusion

I've learned a lot from making this project alone, it sure looks like just a simple website, but behind the scene, I learned quite a lot of things from the framework, REST API architecture, packages, and styling (which I haven't touch yet on this article). Obviously, I wouldn't be able to share them all within the constraints of this single article (what's with the fancy word). So if you want me to write them, just let me know!

this post is originally written on my LinkedIn