Make your own active link component with useRouter and TypeScript

Photo by Ellie Lord on Unsplash

One of the first components I create while making a new NextJS application is a NavLink component. This component wraps Next's next/link component and adds an activeClassName if that link is active. If you’ve worked with React Router before, you are most likely familiar with their NavLink component, and that’s what we’re trying to recreate here today.

Let’s start with creating a brand new NextJS application with create-next-app. I started my project by running

npx create-next-app -e with-typescript

Once the bootstrapping is finished, we can get started.

The default NextJS TypeScript example looks like this.


Use ?? instead of ||

Photo by Jamie Street on Unsplash

Over the last six years, I have been lucky enough to help companies build complex and demanding web applications using ReactJS. What I love most about my work is that I’m constantly learning new things, making mistakes, and learning from them.

Recently, I almost introduced a bug into our application that would have negatively impacted some of our users.

I was recently working on a React component for displaying values in a specific currency. The component accepted a currency and an amount, and it would format that value accordingly.

For example, for USD, the value 10.3


Advanced data fetching patterns made easy with useSWR

Photo by Mia Anderson on Unsplash

When it comes to building complex React applications, useSWR is a blessing. It takes away all the complexity of storing and caching your API responses. Most of my applications no longer need global state management.

Today I would like to discuss two advanced (and related) use cases for data fetching with useSWR. Dependent fetching, and conditional fetching.

Some of the advantages of dependent and conditional fetching include: simplifying application structure, reducing database lookups and improving application performance.

Dependent fetching happens when you have a fetch request that relies on the fetching of other data before it can begin. SWR takes…


I use these in all my new applications

Photo by Seven Shooter on Unsplash

With the start of a new year comes reflection. Thinking back on how I made React applications in the last, I can see that a lot has changed.

I used to use redux for all of my projects, now I simply use react-hooks. I used to test with enzyme, now I use react-testing-library. I used to use CSS in JS libraries like emotion and styled-components, now I use plain CSS and Tailwind.

I used to use Gatsby for my static site needs, now I use NextJS. I used to use plain JavaScript and Prop Types now I use TypeScript.

So…


Is there still a place for project boilerplates in 2021?

Photo by Christina @ wocintechchat.com on Unsplash

When I first started working with React in 2016, boilerplates were all the rage. Almost everyone recommended starting your new project with one of the many boilerplate options, with react-boilerplate being the most popular.

Fast forward to 2021, and that’s no longer the case.

When we first started working with React, there was no “one” way, or a CLI to create a new project. We had to set up our projects by installing dev dependencies like webpack to bundle our code, babel to transpile it, and had to configure webpack on our own.

The setup became even more complex when…


Taking a look at the stats behind our best-performing articles of 2020

Photo by Campaign Creators on Unsplash

2020 has been a difficult year for all of us, but it’s been a year of incredible growth for this publication.

We grew from two hundred followers in January 2020 to over two thousand followers. We are extremely proud that Frontend Digest is now one of the most-read publications on Medium for topics like JavaScript, React and NextJS.

While an international move slowed down progress on Frontend Digest towards the end of 2020, I’m looking forward to spending more time and effort growing this publication in 2021.

If you’re looking interested in writing for us and looking for inspiration, take…


The latest release brings big changes

Photo by Bobby Burch on Unsplash

Tailwind is by far, the most popular utility CSS framework. It’s changed the way we build web applications, and how we work with CSS. It’s themeable, extendable, and easy to work with.

I love Tailwind because it lets me concentrate on shipping. I can build full features, full pages, without ever leaving my HTML. Instead of having to write display: flex; everywhere, I can just use a class name. I enjoy the utility first approach championed by Tailwind.

Tailwind 2.0 is the first major release since Tailwind 1.0 …


Photo by Kelly Sikkema on Unsplash

They really grind my gears

Don’t get me wrong. I love my job. My coworkers are great, the salary is nice, and the freedom to work remotely is amazing. But that doesn’t mean there aren’t things that I have about being a programmer.

I have worked full time as a Frontend Developer for about five years. I’ve worked for agencies, for product companies, in North America and in Europe. And at every one of these companies, I’ve found these problems.

These are the things I hate most about my job.

1. Useless meetings, endless process

Scrum is the most popular software development methodology. If you have worked as a software…


Internationalization, image optimization and so much more

Photo by Priscilla Du Preez on Unsplash

NextJS is a popular framework for making high performance, server-rendered React applications. Originally released in 2016 by Vercel, NextJS has come a long way. It’s now one of the most popular frameworks for not only building server-rendered applications but also for building static sites.

Let’s go over what’s new in this release, and why we are so excited for the future of NextJS.

Highlights

NextJS 10 introduces a new component: next/image. The NextJS team worked with the Google Chrome team to create this component that offers performance as a default. With this component, our images are automatically lazy-loaded and responsive.

One…


Using useEffect, useRef and TypeScript

Photo by Jeremy Perkins on Unsplash

The Fetch API supports cancelling requests using AbortController interface. We can therefore cancel in-flight requests in our applications without the need for including external fetching libraries like axios.

Example of the `AbortController` API

Above we can see how we can use an AbortController to cancel an in-flight fetch request.

But this basic example is not indicative of how you would use this API in your applications. Let’s instead look at a real world example.

Cancelling Fetch Requests in React Applications

We will create a React application that allows users to type in a search term. Then our application will call an API, and return a list…

Malcolm L

JavaScript Consultant. Senior React developer. Always learning something new.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store