Create a sign-in page with Next.js and Tailwind CSS | Episode 2

Photo by Zan on Unsplash

Introduction

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.

Why the dark theme?

The dark theme has been around for a while and adopted to most of the operating systems, browsers, and popular…


Photo by Danial Igdery on Unsplash

Create a sign-in page with Next.js and Tailwind CSS | Episode 1

Introduction

As a web developer, you should have heard about The State of JavaScript Survey which has been conducted every year since 2016. The creator also surveyed CSS, The state of CSS survey. Let’s have a look at the result of The state of CSS 2020!

The state of CSS 2020


Photo by KOBU Agency on Unsplash

The 2nd episode of the Cookbook app

Introduction

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.

Why is a search box essential?

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…


The 1st episode of the Cookbook app

Introduction

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.

Which API request to cache? And how does it work?

There are API requests in the application that are made frequently with the same parameters and return the same result. If these API…


Performance comparison of Next.js 10 Image Component and next-optimized-images

Photo by Markus Spiske on Unsplash

Introduction

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 this story, we are going to compare the performance between the HTML img tag, next/image component, and next-optimized-images plugin.

Why do we need image optimization?

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:

  • the web is not the only Javascript: it’s also markup and images
  • images take up 50% of…


Next.js + styled-components + react-styled-flexboxgrid => Responsive PWA

Photo by Domenico Loia on Unsplash

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.

1. Setup a Next.js application

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 report with fireworks on 100% score

Why 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

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.

Let’s start!

Rocky Li

Lead Web Engineer | Full-Stack Developer | Coder

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store