Next.js

By Omari Thompson-Edwards
How To Set Up TailwindCSS in Your Next.js App

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 [...]

By Omari Thompson-Edwards
Fetching Data From an API in Next.js

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 [...]

By Omari Thompson-Edwards
How to Set Up Chakra UI With Next.js

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 [...]

By Omari Thompson-Edwards
How To Build an Animated Dashboard with Framer Motion in Next.js

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 [...]

By Omari Thompson-Edwards
How To Use useState in Next.js

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 [...]

By Omari Thompson-Edwards
How To Upload a File to S3 With Next.js

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 [...]

By Omari Thompson-Edwards
How To Create a Scroll to Top Button in Next.js

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 [...]

By Omari Thompson-Edwards
How To Add Google Fonts to Your Next.js App

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 [...]

By Omari Thompson-Edwards
How To Use Environment Variables in Your Next.js App

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 [...]

By Omari Thompson-Edwards
Automating Your Next.js App with PM2

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 [...]

By Omari Thompson-Edwards
How To Use getStaticProps in Next.js

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 [...]

By Omari Thompson-Edwards
How to Create a To-do App with Strapi and Next.js

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 [...]

By Omari Thompson-Edwards
Creating an MDX Blog With Next.js

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, [...]

By Omari Thompson-Edwards
Deploying your Next.js App Through GitHub Pages

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 [...]

By Omari Thompson-Edwards
How To Use LocalStorage in Next.js

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 [...]

By Omari Thompson-Edwards
New Features in Next.js 13

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/ DirectoryTurbopack – A new module bundler to speed up your appsnext/image [...]

By Omari Thompson-Edwards
How to Style Images in Next.js

Next.js provides a built-in Image component, which provides benefits like lazy loading, and improved performance. You get all these benefits for free just from using the Image component to display your images, but one issue with the component is its slightly convoluted approach to styling. Next.js has a lot [...]

By Omari Thompson-Edwards
How to Use File-Based Routing in Next.js

Next.js uses file-based routing. This means it looks in your pages directory and uses the path of any page components it finds to decide what the route for that page should be. Next.js has a few different ways of figuring out what the route for your page should be, so [...]

By Omari Thompson-Edwards
Global State Management With Next.js

There are a lot of solutions to global state management in Next.js, but one of the simplest methods is through the built-in useContext and useReducer hooks. You can use useReducer to manage your complex state, and the Context API to provide access to that state globally. Global State vs Props [...]

By Omari Thompson-Edwards
How to Convert Your Next.js App to TypeScript

If you’re unsure of what TypeScript is, it’s basically a typed language built on top of JavaScript. All JavaScript is valid TypeScript, but not vice-versa. You can read more about it, and how it works with React/Next.js here. You can easily set up TypeScript [...]

By Omari Thompson-Edwards
Server Side Rendering with getServerSideProps in Next.js

Server Side Rendering attempts to convert as much of your webpage as possible to static HTML before serving the site. This means things like making an API call, instead of happening on the client when you navigate to the page, it will happen on the server, before the page is [...]

By Vlad Mihet
React vs Next.js. Which One Should You Use?

With the recent trends in Front-End Web Development, we’ve seen a lot of additions to the collection of JavaScript frameworks, each being unique in its way and coming with its perks and disadvantages. As such, I wanted to look at the React side of things only, check the two main [...]

By Omari Thompson-Edwards
How to Fix “window is not defined” in Next.js

This issue has to do with Server-Side Rendering in Next.js. Next.js will by default try to use SSR for your site. This means that since we’re on the server and not in the browser, the “window” object does not exist. The workaround for this is forcing Next.js to run your [...]

By Omari Thompson-Edwards
How to Create Redirects in Next.js

Next.js provides out-of-the-box routing features which make redirecting straightforward and easy. In this tutorial, I’ll talk you through how to redirect through two different methods, permanent redirects through the Next.js config, and client-side redirects with the useRouter hook. If you’re not familiar with Next.js, it’s a great framework that expands [...]

By Omari Thompson-Edwards
getServerSideProps vs getInitialProps getStaticProps in Next.js

These three functions combine two topics, component props, and pre-rendering. Props can be used to pass values to a component, and you can find out more about that here. Since in Next.js pages are also components, we can pass values to them as well! The three “getXProps” functions each [...]

By Omari Thompson-Edwards
How To Parse Query String Parameters in Next.js

What Is a Query String? Example URL A query string is a method of passing variables to a URL, in the form of a list of key-value pairs, beginning with “?”, and separating each following “key=value” pair with an “&”. In the URL above we can see we have the [...]

By Omari Thompson-Edwards
How To Deploy Your NextJS App Through Vercel

Publishing your Next.js app can sometimes be a pain. One of the key benefits of using the Next.JS framework to create your website is how straightforward it can make deployment, abstracting away the usual difficulties, and providing a free, easy to use hosting solution through Vercel. What is Vercel? This [...]

By Dawid Budaszewski
Where Does Nextjs Put Build Folder?

The build is the process which creates (or builds) the optimized production version of your application that is ready for deployment.

By Dawid Budaszewski
What Is NextJS?

It's a new framework that builds on top of React and solves some of the problems that were not addressed in its precursor.

By Dawid Budaszewski
How To Use Environment Variables in NextJS Applications?

Environment variables are very useful when it comes to building modern web applications.

By Dawid Budaszewski
How To Link to an External Page in NextJS?

It's actually quite simple to do that, but you may be a little bit confused with the built-in Link components.

By Dawid Budaszewski
Where To Keep Components in a NextJS Application?

The structure of the files in your NextJS application is really important. I mean it literally.

By Dawid Budaszewski
Where To Use CSS in NextJS Projects?

Using CSS in NextJS applications is actually not as difficult as it may seem in the first place.

By Dawid Budaszewski
How To Use Material UI in NextJS Applications?

Material UI (MUI) is fantastic out of the box component library that developers can import into their projects and use.

By Dawid Budaszewski
How To Start a New NextJS Project and Open It in VS Code?

We can take advantage of Create Next App, which works very closely to how Create React App does for React.

By Dawid Budaszewski
How To Check My NextJS Version and Update It?

ersioning can be a nightmare to deal with, especially for new software engineers.

By Dawid Budaszewski
How To Use Images in NextJS Applications?

Images are a common part of many websites. It's important that you learn how to use the images properly in NextJS to make use of all of the optimizations that the framework developers have provided for us.