#next.js

Omari Thompson-Edwards 31 Jul 2023 3 min read

Next.js is a great React-based library, which includes some great features built-in that make getting started with your React app easy and simple. One of those features is the fairly new next/font package, which makes implementing fonts in your Next.js app quick and easy. Getting Started Google Fonts One of the great features of Next’s […]

next.js

Omari Thompson-Edwards 13 Jun 2023 3 min read

Hey there, fellow Next.js enthusiasts! Are you looking to add some visual flair to your web application? Well, you’re in luck! In this article, we’ll dive into the wonderful world of Font Awesome icons and explore how you can integrate them seamlessly into your Next.js projects. So, let’s get started and make your app shine! […]

next.js

Omari Thompson-Edwards 25 May 2023 3 min read

If you’re building web apps in Next.js, you’ve probably had to iterate through an array at some point. This means you’ll have run into the issue of keys; unique ids for each element. In this article, we’ll talk about keys, when to use them, and how to create them. What are keys? The key prop […]

next.js

Omari Thompson-Edwards 25 May 2023 5 min read

If you’re familiar with React, then you’ve probably heard of the useEffect hook. It’s one of the most powerful and commonly used hooks in React, and it allows you to perform side effects in your components, such as fetching data from an API or setting up event listeners. In Next.js, the useEffect hook is just […]

next.js

Omari Thompson-Edwards 25 May 2023 4 min read

Have you ever visited a website with a long list of items, only to feel overwhelmed and lost in the sea of information? That’s where pagination comes in handy. By dividing content into smaller, manageable chunks, pagination helps users navigate through a website more easily and efficiently. In this article, we’ll explore how to implement […]

next.js

Omari Thompson-Edwards 25 May 2023 5 min read

Are you looking for a powerful and flexible framework to build your next web project? If so, you may want to consider Next.js. This React-based framework has gained popularity in recent years thanks to its many advantages, such as server-side rendering, automatic code splitting, and static site generation. Whether you’re building a simple blog or […]

next.js

Omari Thompson-Edwards 1 May 2023 2 min read

AWS Amplify is a cloud development platform that streamlines the deployment of web applications, making it easier for developers to focus on writing code. With AWS Amplify, you can quickly deploy your Next.js app to the cloud and take advantage of its powerful features. In this article, I’ll guide you through the process of deploying […]

next.js

Omari Thompson-Edwards 1 May 2023 4 min read

If you’re a developer working with Next.js, you may have found yourself needing to load data from a file in your application. This could be anything from a JSON file containing configuration settings to a CSV file with data that needs to be processed and displayed on your site. Loading data from a file in […]

next.js

Omari Thompson-Edwards 21 Apr 2023 3 min read

Sending emails is an essential part of many application. In this article, we’ll work through a full-stack solution for sending emails in Next.js, using Next.js API routes, along with SendGrid, a great API service for sending emails. Setting Up To use SendGrid, you’ll need to create an account. Head over to their website and sign […]

next.js

Omari Thompson-Edwards 22 Mar 2023 5 min read

Next.js is a popular React-based framework that enables server-side rendering, automatic code splitting, and simpler client-side routing. In this article, we’ll discuss how to send data from one component to another in Next.js. There are a few approaches you might take to passing data between components. In this article we’ll go through: Props One of […]

next.js

Omari Thompson-Edwards 14 Mar 2023 2 min read

Prettier is a popular code formatter that can help keep your codebase organized and consistent. In this article, we’ll walk through how to set up Prettier in a Next.js project. Set-up Firstly of course you’ll need to install Prettier. You can do this with the following command: This will install Prettier, and add it as […]

next.js

Omari Thompson-Edwards 14 Mar 2023 4 min read

Are you tired of dealing with tedious form validation in your React applications? Look no further than React Hook Forms in Next.js! RHF is a React hook that provides a simple and intuitive API for managing form state, validation, and submission. It supports both controlled and uncontrolled components, as well as dynamic form fields, custom […]

next.js

Omari Thompson-Edwards 14 Mar 2023 5 min read

Animating components on scroll is a great way to add a touch of interactivity to your web application. It can help you create engaging user experiences that make your application stand out. In this article, we will explore how to use Framer Motion to animate components on scroll in Next.js. Set-Up First of all, you’ll […]

next.js

Omari Thompson-Edwards 3 Mar 2023 5 min read

What is the Context API? The Context API lets developers pass data down the component tree without having to use props. It is a way to share data across multiple components without having to pass props through each level of the component hierarchy, i.e. to avoid “Prop Drilling” The Context API consists of two parts: […]

next.js

Omari Thompson-Edwards 3 Mar 2023 4 min read

Next.js is a popular open-source framework used for building web applications with React. One crucial aspect of web applications is authentication and authorization, which can be a complicated process to implement. This is where Auth0 steps in. Auth0 is a cloud-based identity platform that simplifies the process of adding authentication and authorization to web applications. […]

next.js

Omari Thompson-Edwards 28 Feb 2023 5 min read

Hey there! If you’re a web developer, you know that navigation bars are a crucial part of any website. In this article, I’ll show how you how to build a nav bar in Next.js, from setting up your project to creating components styling with TailwindCSS, and animations with Framer Motion. Setting Up First, we’ll need […]

next.js

Omari Thompson-Edwards 20 Feb 2023 4 min read

React Query is a popular library for fetching, caching and managing the state of your data in React applications. Next.js is a great framework for building server-rendered or statically exported React applications. Together, they can make building fast and efficient data-driven applications even easier. We also have an article covering using React Query in vanilla […]

next.js

Omari Thompson-Edwards 30 Jan 2023 4 min read

TailwindCSS is a popular utility-first CSS framework that allows developers to quickly and easily build responsive, consistent user interfaces. Next.js is a popular React-based framework, which works perfectly with Tailwind. If you’re using vanilla React, we also have an article covering using Tailwind with that here. In this article, I’ll show you how to set […]

next.js

Omari Thompson-Edwards 30 Jan 2023 3 min read

Fetching data in a Next.js app is an essential part of building any web application. Axios is a popular library for making HTTP requests in JavaScript. It can be easily integrated into a Next.js app to handle the fetching of data from an API, and in this article I’ll talk you through that process. Set-up […]

next.js

Omari Thompson-Edwards 26 Jan 2023 3 min read

Chakra UI is a popular library for building user interfaces with a focus on accessibility and developer experience. It provides a set of reusable components that can be easily integrated into any project. In this article, we will go over the process of setting up Chakra UI with Next.js, a popular framework for building server-rendered […]

next.js

Omari Thompson-Edwards 26 Jan 2023 6 min read

Framer Motion is a powerful animation library that makes it easy to create smooth, complex animations in your Next.js projects. In this article, we will explore the benefits of using Framer Motion in a Next.js project. By combining the two, you can create highly interactive and visually appealing Next.js applications with minimal effort. Let’s walk […]

next.js

Omari Thompson-Edwards 23 Jan 2023 5 min read

Functional components in Next.js are executed exactly like regular functions; they return some custom HTML used to render your component. This means any values in the function are initialised when you call the function, resetting them every time your component renders. You can use the useState hook to persist values across renders. Example Here’s the […]

next.js

Omari Thompson-Edwards 23 Jan 2023 4 min read

Uploading a file to Amazon S3 (Simple Storage Service) in a Next.js application is a straightforward process that can be accomplished with the help of the AWS SDK (Software Development Kit) for JavaScript. Getting Started First, you’ll need to set up an S3 bucket in your AWS account, and make note of the access key […]

next.js

Omari Thompson-Edwards 3 Jan 2023 3 min read

Scrolling to the top of a page can be a useful feature to include in your Next.js website or application. It can be especially helpful when a user has scrolled down a long page and wants to quickly return to the top. In this article, we’ll explore how to implement this in Next.js. We also […]

next.js

Omari Thompson-Edwards 14 Dec 2022 3 min read

Google Fonts is a great collection of free fonts to use in your web app. Thanks to Next.js, using any font from Google fonts is very streamlined and simple. In this article, I’ll talk you through the Next.js method, as well as a method that works for older versions of Next.js. next/font One of the […]

next.js

Omari Thompson-Edwards 14 Dec 2022 4 min read

Environment variables are variables passed to your app when it starts. They’re called so because they’re part of the environment your app will run in. They’re useful for things like telling your application if it’s running in production or development mode, or passing in values like API tokens or API URLs. If you’re looking to […]

next.js

Omari Thompson-Edwards 13 Dec 2022 3 min read

PM2 is a Javascript process manager. It’s used to handle automatically managing your application in the background. A common use case for PM2 is deploying a Node.js app on a server. PM2 can help to handle storing configurations for the app, starting your app and handling things such as automatically starting your app with your […]

next.js

Omari Thompson-Edwards 4 Dec 2022 4 min read

Next.js provides multiple methods of pre-rendering your content for your app. You can check out a comparison of these different methods here, but today I’ll be covering Static Site Generation with getStaticProps(). Static Site Generation pre-renders your content at build time, so that it can serve that part of your app as a static HTML […]

next.js

Omari Thompson-Edwards 30 Nov 2022 4 min read

Strapi is a headless CMS, or Content Management System. If you’ve ever used a site editor like WordPress or Squarespace, these give you a back-end CMS, where you edit the content, and the front-end “head”, which handles displaying/rendering your content. With a headless CMS like Strapi, you can manage your content in the back-end, and […]

next.js

Omari Thompson-Edwards 30 Nov 2022 4 min read

Markdown is a simple syntax for formatting text files. If you’re used to GitHub, you’re probably familiar with creating and editing readme.md files in your repos. MDX is an extension of markdown that adds support for JSX. Using Next.js’ Static Site generation, we can create a very simple to use, fast and light blog, with […]

next.js

Omari Thompson-Edwards 25 Nov 2022 3 min read

GitHub Pages is a great free resource for hosting unlimited static sites. You can build your Next.js app into a static site using Next’s export feature. There are a few features of Next.js you won’t be able to use with this, but in this article, I’ll talk you through deploying your app, and what you […]

next.js

Omari Thompson-Edwards 25 Nov 2022 5 min read

LocalStorage is an API that lets your site store things in the browser, to persist things when you leave the site. If you’ve ever wondered how browsers do things like save your settings and preferences, there’s a good chance they’re using LocalStorage. Checking the website for the game Wordle, for example, we can see what […]

next.js

Omari Thompson-Edwards 15 Nov 2022 3 min read

A new version of Next.js has been released, featuring some great improvements for performance and usability, as well as some interesting new features, which I’ll talk you through in this article. Important features in Next.js 13 are New app/ Directory Turbopack – A new module bundler to speed up your apps next/image – Some changes […]

next.js