React

How to's and tutorials on our favorite Javascript library.
Leonardo Petrucci
June 4, 2021

How to read markdown files from Next.js API routes

Next.js' API routes are handy, but they're unfortunately limited when it comes to reading static files. Here's a quick guide on how to read markdown files in a Next.js API route. While re-building ironeko as a static site I got to the point of needing to rework how my sitemap is generated. I previously wrote about outputting XML content from Next.j

Leonardo Petrucci
February 21, 2021

Setting safe areas in React with CSS variables

Most apps and sites have elements or menus that overlap others and depending on the number of pages you have you might want to not set these safe areas manually. So here's a little trick to set safe areas with React. Consider this simple interface: Left - Interface without safe areas, Right - with safe areas It contains a scrollable list of cards as well as

Leonardo Petrucci
December 18, 2020

Animating page transitions in Next.js for Capacitor

Capacitor is a fantastic solution to running web apps as native. Unfortunately it can also be quite hard to give your front-end that extra polish to make it look truly native. In this article we'll go over implementing page transitions in Capacitor and Next.js None of the examples in this article actually require you to use Capacitor, so if you're just looking to jazz up your Next.js app this article is

Leonardo Petrucci
November 29, 2020

Do you need Redux? I didn't, and you probably don't either

After completely removing Redux from most of my codebases, I realised that it's not half as important as most of the internet seems to believe. So do you need Redux really? Here's a little exploration on why you should think about dropping it altogether. What is Redux? In case you're not aware, Redux is a state management library for React. It's now been out for a while, with

Leonardo Petrucci
October 25, 2020

How to return a 404 error in getServerSideProps with Next.js

After a lot of misunderstandings and frustration with the documentation on the Next.js docs I decided it might be worth explaining how to properly return a 404 error in getServerSideProps with Next.js. What's the problem with Next.js and its error pages? If you're reading this you're probably aware that Next.js has a fairly clear page about showing custom error pages. I suppose most people will be absolutely fine with the solutions provided

Leonardo Petrucci
October 20, 2020

Getting started with Capacitor using Next.js on iOS

We previously talked about [how to get started with Next.js on Android](https://api.ironeko.com/posts/getting-started-with-capacitor-using-next-js/(opens in a new tab)). In that article though we had to skip over iOS setup as we didn't have access to a Mac. This week I finally got my hands on a Mac mini, so I spent a couple days troubleshooting problems with Next.js and Capacitor on iOS. How to use Next.js and Capacitor together on iOS Before doing anything else, start setting up your app by following

Leonardo Petrucci
September 11, 2020

Find element size in React with the useDimensions hook

Trying to find the size of an element in React can be quite annoying, especially if you want to keep track of any changes in size. The custom useDimensions hook should hopefully make this task much easier! Usually keeping track of a div in vanilla Javascript is fairly easy: just keep track of any changes to the size of the window and check the size of the div whenever you need to. This is complicated a bit by React as you actually need to be able to understand a couple of hooks before you can find the height and width of an element

Leonardo Petrucci
August 6, 2020

Getting started with Capacitor using Next.js on Android

Ever wondered how to run a Next.js app natively on a mobile device? It requires some setup but it's actually very easy thanks to Ionic's Capacitor! We also have a Capacitor + Next.js + iOS guide! What is Capacitor? Capacitor is Ionic's solution to running web apps natively on your device. To put it simply, if your app works on the web, Capacitor is an easy solution to use your already existing front-end while still being a

Leonardo Petrucci
July 3, 2020

How to add an RSS feed to your Next.js site

A couple of weeks ago I struggled with figuring out how to add an RSS feed to my Next.js site, so I thought I'd write up a short guide on how I achieved it. Working with Next.js Next.js pages are made to output HTML markup and Javascript. You can use workarounds to output other types of files, yes, but there's actually a much simpler way to achieve this. The easy solution to outputting an RSS feed with Next.js Ne

Leonardo Petrucci
March 5, 2020

Next.js vs Express: Which one should you choose?

When I built this site, Next.js' built-in server wasn't great... so I had to rely on Express. But have the recent updates to Next.js 9 changed my mind? Let's compare. I created Ironeko during the few months before Next.js 8.1 was released. At that point the only realistic way to actually run Next.js was with a custom Express server and using something like next-routes to handle routing.

Leonardo Petrucci
January 26, 2020

Infinite Carousel with React Spring: How to?

React Spring is a fantastic animation tool, but it's not the most straight forward. In this article we'll go through how to build an infinite React Spring carousel. Edit 8/9/2020: I've made some significant improvements to the carousel script in this article. These include: Autofitting the carousel to its container Back and Forward buttons More clear options Better logic Before we go any further let me show you what the final product of an infinite react spring carou

Leonardo Petrucci
September 9, 2019

Parallax effect with React Spring: How to?

Ever wondered how to create a parallax effect with React Spring? This is one of my favourite effects to use when sprucing up a page with some motion. However, due to how React works, tracking the scroll position is a bit harder than it would be on a standard website. So let me show you how we can achieve this effect with React Spring, an animation library for React. Animating React with React Spring There's a lot to say about React Spring, much more than one article could cover, but in case you're unfami

Leonardo Petrucci
August 7, 2019

Web Design Inspiration #1: Functional and Beautiful

There is one thing that I see people asking for over and over in all the communities I post in: realistic examples for web design inspiration. These are really hard to come by. I'll usually see suggestions from sites such as Awwwards - and while these sites can be beautiful, more often than not their usabilty falls short. Of course there's a place for both beautiful and functional websites, but I think people have a harder time pinpointing good UX. This is why I want to start this Web Design Inspi