Home
Blog

Built by Adam Richardson

All Rights Reserved 2022

Search

;

Adam Richardson's Blog

This blog contains posts about things that I think may be useful, along with code snippets that I use frequently. Most of the posts are pretty technical and are relating to Next.js, React, Javascript, Typescript or data related topics such as Python, Pandas, SparkSQL and Matplotlib.

Filter By Tag

Nextjs Analytics Javascript Hygraph React Code Snippet Configuration Authentication Data Fetching Node.js Graphql API Tailwindcss

Track analytics events in Nextjs 13 App directory

With the changes to Next.js 13 app directory, and mainly the fact “router.events” is no longer supported, here is how you can register analytics events

NextjsAnalyticsJavascript

Create a Hygraph block renderer with Next.js

In this article, I will show you how you can create your own Hygraph Block renderer to give complete control over your content, create custom blocks for use with next/image etc

JavascriptHygraphReact

Add Fathom analytics to a Next.js website

Code for adding Fathom to Next.js website

Code SnippetNextjsHygraph

Next.js Eslint configuration with vscode

Learn how to configure ESLint with vscode for usage with Next.js

NextjsConfigurationJavascript

Next.js Authentication with next-auth and Prisma

Learn how to setup a Next.js application with authentication using next-auth.

NextjsAuthenticationJavascriptReact

UseSWR prefetch, pagination and search example

Code for prefetching and statically generating a page then taking over with useSWR for pagination and search on client-side

Code SnippetJavascriptReact

Next.js Data Fetching Methods Explained

All of the data fetching methods Next.js has to offer, explained. When to use different data fetching methods in Next.js.

NextjsJavascriptData Fetching

Next.js Image Upload to Amazon S3

Code drop for uploading images via a next JS API route to Amazon AWS S3

Code SnippetNextjsNode.js

Graphql Server in Next.js Route

Code drop for creating a graphql server in a Next.js Application route

Code SnippetGraphql

Fetching Videos and statistics from Youtube

Code drop for fetching statistics and videos from YouTube

Code SnippetData FetchingAPI

Fetching Youtube Channel Information and Videos using Youtube API

How to fetch YouTube channel information from the YouTube API

Data FetchingAPIJavascript

Next.js, Javascript and ESLint configuration

Code drop for my current ESLint, prettier configuration

Code SnippetConfigurationNextjs

Next.js, Typescript and ESLint Starter Configuration

Follow the steps laid out in this article to have a Typescript and ESLint configured starter template

NextjsConfiguration

React Toast Component and Custom Hook using Tailwindcss

Toasts are basically just notifications. When you have a complex application or you need a lot of input from your users, giving them feedback on their actions is really important to their experience. Toasts are a great way to do this and here is a simple integration into a React application.

TailwindcssJavascriptReact

Tailwind css Dark Prose classes

Code drop for a Tailwind CSS dark prose class to extend Tailwind Typography

Code SnippetTailwindcss