Posts about

Many developers use React Context for state management in React and Next.js application. Whilst there is nothing wrong with this, the React Context API is far more powerful and has a lot more to offer than just state management. The React Context API can make Next.js code easier to read and maintain by evading the…

This post will walk you through creating a React functional component using google-maps-react. Step 1: Install the google-maps-react package from NPM using the command: npm install google-maps-react –save Step 2: Create a new file for your component. For this tutorial, the file will be named custom-map.js and the name of the component will be CustomMap….

One of my biggest frustrations with using Angular in a continuous-integration/continuous-deployment (CI/CD) pipeline is the lack of flexibility when dealing with environments outside of the Angular CLI. Out of the box, the Angular framework does come with environment support. For example, you'll find the environment.ts file useful when working against development and building for production….

Despite what your favourite developer on Twitter says, you don't always need redux for managing state in your React app. You already knew that and that's why you're here. In this blogpost, I'll show you how to use React Context for state management in a Next.js application. Why should I used React Context with Next.js?…

Next.js supports environment variables out of the box and thankfully they’re very easy to use. Why do I need environment variables If you’re unfamiliar with environment variables it’s likely you haven’t built applications that are run in multiple environments. In the most simplest example, two environments your application will run in is development (when you’re…

I started on my own personal finance journey around February 2020. I always wondered if I’d ever get round to blogging about it. My technology content has helped millions over the years – but personal finance is something very close to my heart. Not too long after I read my first few “things” (I can’t…

I have found Next.js to be an incredibly productive development tool when building content-rich websites that need a focus on Search Engine Optimisation (SEO). There is, however, one area that Next.js doesn't perform so well in – and that's automatically generating a sitemap for Statically Generated (SG) pages. As a result, I am sharing a…

A ViewChild is a reference to a component, directive or element within the template of the current component. We can use the @ViewChild() decorator to access the child component from the parent component. When to use the @ViewChild decorator? Often you might see template references being used to access elements directly. For example, the #name…

With the epic release of Tailwind CSS v2.0, here’s a guide on how you can add it to a new or existing Next.js project. 1. Create a new Next.js project Run the following command to create a new Next.js project. This step should not be new to you if you have previously used Next.js: 
npx…

I wanted to build a really straight-forward website using technologies I already knew to deliver a responsive experience to users, but also a laser-focus on SEO. After considering Nuxt.js, Gatsby.js and Jekyll; I settled on Next.js by Vercel because of it’s support for SSR (server-side rendering) and SG (static generation) through a very pleasant developer…

Chances are that your single-page application built with Angular retrieves data from an API endpoint, and the endpoint is protected. One of the easiest and most simplest forms of protection may be an Api-Key which needs to be added to the header of every request to this endpoint. Without delving deeper in to the pros…