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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
The build is the process which creates (or builds) the optimized production version of your application that is ready for deployment.
It's a new framework that builds on top of React and solves some of the problems that were not addressed in its precursor.
Environment variables are very useful when it comes to building modern web applications.
It's actually quite simple to do that, but you may be a little bit confused with the built-in Link components.
The structure of the files in your NextJS application is really important. I mean it literally.
Using CSS in NextJS applications is actually not as difficult as it may seem in the first place.
Material UI (MUI) is fantastic out of the box component library that developers can import into their projects and use.
We can take advantage of Create Next App, which works very closely to how Create React App does for React.
ersioning can be a nightmare to deal with, especially for new software engineers.
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.