Coding like it's 1999

How I simplified my workflow and built this site using NextJS

I remember building my first site like it was yesterday. The web was a much simpler place back then while I was in middle school. Our science class went on a field trip to a Florida swamp, and as an assignment for Mr. Hayton's class, we had to create a website about our adventures using a tool called Dreamweaver.

Over the years, I flirted with code in different ways. Either by making simple sites or trying to automate things I didn't want to do. However, I never took computer science seriously enough as a career, because designing has always been a bigger part of my life, and it always will be.

The more I got into building websites with frameworks, the more I started disliking coding. I didn't understand why you needed so many layers of tooling to make basic things on a website. That level of non-sense work pushed me away from building stuff on the web until recently when I got back to React Land, because of NextJS and the new wave of easy-to-use tooling.

nextjs

At this point, NextJS has quickly become one of my favorite tools, but if you are wondering what it is, let me explain. NextJS is a set of coding tools that make creating websites with React much easier.

• Fewer files
• Nice data fetching
• Image Optimization
• Great SEO Helpers
• Automatic Routing

There is something so nice about having a folder called pages, and any React file you add there becomes a page. So about.js would become -> mysite.com/about. Boom! Just like when I was 14 years old building my first site in plain HTML. No more time fiddling with React routing, so I can get back to design files and doing CSS tricks.

This site is a simple next js setup, with a few addons.

theme-ui

The debate on which style of styles to use in Javascript land will go on for a while, and I have gone back and forth on which I like better. But I really fell in love with how theme-ui and chakra express responsiveness inline with arrays [mobile, tablet, desktop]. And if ever need to go back to pure CSS, styled-components always have my love.

    <>
      <Flex
        sx={{
          width: [300, 660, 1200],
        }}

      >
        {props.children}
      </Flex>
    </>

Making media queries in CSS has always taking me a long time and being able to just write in arrays on the fly while I'm hacking is really nice. I chose theme-ui because is a lot lighter than chakra-ui, but for larger projects, I probably reach for chakra or even rebassjs.

framer-motion

What kinda lulato site would this be without some good ol' animation, maybe a little stagger action, or just some fade-in to hide the font loading. To get framer-motion to work with theme-ui I had to create some mixed components

export default function Button(props) {
  let Container = motion(ThemedButton);
  return (
    <Container
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{
        scale: 1.05,
      }}
      whileTap={{ scale: 0.97 }}
      sx={{
        padding: 3,
        minWidth: 200,
      }}
      {...props}
    >
      {props.label}
    </Container>
  );
}

Some of the most annoying things about developing websites went away while using Nextjs. Mundanes tasks like pre-loading fonts and optimazing images for multiple screens, I don't have to do anymore.

Code-splitting

One of the biggest struggles while I was learning React was structuring the site/application with react router. Every time I would create a new page, I would have to deal with my root code, dependencies and styles. In NextJS code-splitting is by default Every page is a blank slate, so I could make a full web app on a different page, like this -> mysite.com/mygame. Boom! That level of freedom is so nice.

Data Fetching

I have a newsletter that you should definitely subscribe to. Setting that up with NextJS in the api routes was so easy. The fastest way to explain api routes is that is like magic, just add a javascript file to the api folder in pages and NextJS will create an api for you. How? Who knows? Click here for a technical explanation, but who cares as long as it works.

Markdown

In my opinion, the best way to blog is not to care about the styles of the blog and just write, which is hard for me as a designer. I have arrived at a happy medium because with code-splitting I could make some landing pages anything that I want, but for my blog pages mysite.com/blog/some-article I am using mdx with basic theme styles.

Conclusion

It's nice to get back into coding nowadays, I feel like NextJS is a very flexible framework that doesn't get on the way. I' a'm hosting this site on a world caching network by Vercel, which is the company behind NextJS.