Create a sign-in page with Next.js and Tailwind CSS | Episode 2
In the previous story, we built a sign-in page with form validation with Next.js and Tailwind CSS. I am going to introduce how we can add support to the dark theme with Tailwind CSS and optimize Tailwind CSS for production in Next.js.
Please read the previous story below about how to build a sign-in page with form validation using Next.js and Tailwind CSS in case you missed it.
The dark theme has been around for a while and adopted to most of the operating systems, browsers, and popular…
Create a sign-in page with Next.js and Tailwind CSS | Episode 1
In this day and age, internet search is a habitual behaviour in daily life. People search in medium.com to learn, search videos on YouTube, search products on Amazon and search on Google for decision-making. It makes the search bar become a must-have element in every website.
According to the survey conducted by the Blue Foundation Media on The satisfaction with current web user experiences, close to one-third of those surveyed say no search box is the biggest website turn-off and more than 40% say a search box is the most important feature on a content website.
Especially for a content-based…
More often than not, we make requests to external service APIs to retrieve data for our applications. For instance, integrate openweathermap.org with a weather forecast application or build a dictionary application with WordAPI. These third-party APIs help a lot when we do not have enough time to build and manage the database.
However, the external API calls are expensive both in terms of response time and cost. A simple solution is to cache the external API requests.
There are API requests in the application that are made frequently with the same parameters and return the same result. If these API…
Next.js, one of our favourite frontend frameworks, has version 10 released on 28th October 2020. Many new features come with Next.js 10 but the most eye-catching feature for me is the built-in image optimization component.
In the Next.js 10 blog post, the team listed out some interesting figures which could be strong reasons why we should always optimize the images on our websites:
Next.js + styled-components + react-styled-flexboxgrid => Responsive PWA
Responsive web applications adjust website content and layout using CSS media queries according to factors such as device platform, screen size, and orientation. It should be able to display content on devices as varied as smartphones, tablets, and desktops without any user interface breaks.
In this story, we are going to build a progressive web application using CSS media queries responding to different screen width.
Instead of starting a new Next.js application from scratch, I make use of nextjs-100 repository as a boilerplate for this post. This repository is set up with…
This article covers how we can build a Progressive Web Application with Next.js (React.js) that achieves a 100% score in Google Lighthouse.
Lighthouse becomes a standard in website performance measurement. It is an automated tool for improving the quality of sites in which we can run the auditing in the Lighthouse tab of Chrome DevTools. It covers performance, accessibility, progressive web apps, SEO, and more.
Next.js is an excellent React Framework with server-side rendering capabilities for better SEO and all other features we need for production. We can also build AMP pages with minimal configurations and support Static Site Generation.
Lead Web Engineer | Full-Stack Developer | Coder