Forem: Rashid Ali

How to add Dark mode in Next.js Application using Tailwind CSS.

Rashid Ali — Mon, 16 May 2022 02:34:43 +0000

Hey there, In today's article I am going to show you how to add Dark mode to your Next.js application using Tailwind CSS.

What is Next.js?

Next.js is a React based open-source frontend framework, with features like SSR (Server Side Rendering) and SSG (Static Site Generation). Next.js also comes SEO optimized right out the box so you don't have to do it yourself from the scratch.

What is Tailwind CSS?

Tailwind CSS is utility-first CSS framework for quickly building highly customizable User Interfaces with low level CSS, This is great because it provides you an easy way to implement your web design and it only ships the CSS that is being used on the webpage which makes the whole app more light and efficient.

Here is how you can add Dark mode to your Next.js application using Tailwind CSS.

Prerequisites:

Make sure you have Nodejs installed on your local machine.

1. Setting up a new Next.js project

You can skip this step if you already have one.
Run npx create-next-app nextjs-tailwind in your terminal that should give you a new Next.js project with following files, You can use what ever name you prefer instead of nextjs-tailwind.

Run cd nextjs-tailwind to change directory and run npm run dev or yarn dev if you are using yarn to start your local developement server.

Go to http://localhost:3000, There you will be able to see the following default Next.js homepage.

2. Adding Tailwind CSS

Run npm install -D tailwindcss postcss autoprefixer, It will install Tailwind CSS and all the necessary dependencies.
Then run npx tailwindcss init -p, It will create tailwind.config.js and postcss.config.js files.

Open tailwind.config.js and do the following code changes.

module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

It will let Tailwind CSS know that on which files or folders it should be applied.

Now open styles/globals.css and add the following tailwind directives.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Spin up you development server by running npm run dev.

Make following changes into your pages/index.js to see if Tailwind CSS is working.

export default function Home() {
return (
<div className="pt-6 mt-28">
  <div className="flex justify-center items-center flex-col ">
    <div className="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md mt-10">
      <a href="#">
        <img
          className="rounded-t-lg "
          src="https://source.unsplash.com/random/1920x1080/?laptop"
          alt=""
        />
      </a>
      <div className="p-5">
        <a href="#">
          <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">
            Laptops that you can't afford even in 2022.
          </h5>
        </a>
        <p className="mb-3 font-normal text-gray-700">
          Lorem ipsum dolor sit amet. Cum laudantium laborum ut saepe
          facilis aut rerum corporis qui debitis voluptas. Rerum dolores aut
          voluptas galisum aut iure repellendus.
        </p>
        <a
          href="#"
          className="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
        >
          Read more
          <svg
            className="ml-2 -mr-1 w-4 h-4"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
              clipRule="evenodd"
            ></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>
);
}

After this you should be able see a card with a image and some text.

If you are using VS CODE you can use Tailwind CSS IntelliSense for better development experience.

3. Adding Dark mode

To add dark mode we need to install few things.

next-themes, This package provides an easy to implement themes in Next.js, You can check more on that here.
This package is optional you can use text or SVGs directly if you want but I will install @heroicons/react, It is an icon library which I will be using to make a theme toggle button.

Run the following command to install above packages.

npm install @heroicons/react next-themes

Edit `_app.js`

Wrap the whole app with the ThemeProvider to use next-themes.

import '../styles/globals.css';
import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider enableSystem={true} attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Then go to tailwind.config.js and add darkMode: 'class' after content array.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
};

Note:

Technically you can hard code darkMode in tailwind.config.js and in the attribute of the ThemeProvider but since we want it to have state so I am using class. It will update HTML head and tailwind with the current theme using the ThemeProvider's context.

4. Creating the theme toggle component.

Create a src folder in root directory of the project and inside that create a file with name ThemeToggler.js, Add following code.

import { useTheme } from 'next-themes';
import { useState, useEffect } from 'react';
import { MoonIcon, SunIcon } from '@heroicons/react/outline';

const ThemeToggler = () => {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return (
    <button
      className="w-8 h-8 bg-blue-100 rounded-lg dark:bg-slate-800 flex items-center justify-center hover:ring-2 ring-blue-400 transition-all duration-300 focus:outline-none"
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      aria-label="Toggle Dark Mode"
    >
      {theme === 'light' ? (
        <MoonIcon className="text-blue-500 w-5 h-5" />
      ) : (
        <SunIcon className="text-blue-400 w-5 h-5" />
      )}
    </button>
  );
};

export default ThemeToggler;

Let me break it down for you

I am using useTheme hook from next-themes that provides two things, one is theme which is just a string representing current theme and setTheme which is a method to change the current theme. It is similar to useState hook.
Since our component gets rendered on server first so we have some hydration mismatch problem, so in order to solve that I am checking if the component is mounted on the client side using React's useEffect hook.
In last I am using sun and moon icon to indicate actions with a simple JSX ternary operator.

How to add tailwind utility classes for dark mode.

So the way tailwind CSS dark mode works is similar to hover feature, once you have decided how you want the element to look in dark mode you can just add dark: in front of any utility classes that you wish to be activated in dark mode only.

Example:

<p className="text-slate-800 dark:text-slate-300"
>
This is some text.
</p>

so text color will be slate-800 if in light mode and slate-300 if it is in dark mode.

Final steps

Now lets add ThemeToggler and some classes for dark mode in our homepage, Open pages/index.js and add following code.

import ThemeToggler from '../src/ThemeToggler';

export default function Home() {
  return (
    <div className="pt-6 mt-28">
      <div className="flex justify-center items-center flex-col ">
        <ThemeToggler />
        <div className="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 mt-10 transition duration-300">
          <a href="#">
            <img
              className="rounded-t-lg "
              src="https://source.unsplash.com/random/1920x1080/?laptop"
              alt=""
            />
          </a>
          <div className="p-5">
            <a href="#">
              <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                Laptops that you can't afford even in 2022.
              </h5>
            </a>
            <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
              Lorem ipsum dolor sit amet. Cum laudantium laborum ut saepe
              facilis aut rerum corporis qui debitis voluptas. Rerum dolores aut
              voluptas galisum aut iure repellendus.
            </p>
            <a
              href="#"
              className="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            >
              Read more
              <svg
                className="ml-2 -mr-1 w-4 h-4"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                  clipRule="evenodd"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

If you have done every thing as mentioned you should be able to see something like below on the homepage.

The image can be random because I am using Unsplash API.
Also if you open browser's dev tools, You will be able to see the current state of theme on your local storage.

Thanks for reading, I hope you got something out of it, if you have any questions or suggestions, please feel free to comment below also don't forget to follow me on twitter.

How to Dockerize a Next.js Application for beginners.

Rashid Ali — Wed, 11 May 2022 02:28:21 +0000

Hey there, In today's article I am going to talk about how you can use Docker to containerize your Next.js application.

What is Docker and why you should use it?

Docker is an open platform for developing, shipping, and running applications. Docker enables you to virtualize your whole application to separate it from your pc or development machine. You can virtualize your application on an operating system level, You can define what operating system your application will live on, What files it needs to have, which dependencies it need, etc.

Its like setting up your application on a new pc with your desired OS and stuff but its all automated and you just have to define it once.

Docker packages your application along with OS into smaller and portable virtual machine's like infrastructure called Docker Container.

Enough talking, lets see how you can Dockerize your Next.js or React App.

Prerequisites:

Docker, check out how you can install docker on Windows, Mac and Linux.
Node.js, Download and install it on your pc.

1. Setting up new Next.js project

You can skip this step if you already have one.
Run npx create-next-app docker_nextjs in your terminal that should give you a new Next.js project with following files, You can use what ever name you want instead to docker_nextjs.

Open your command line and navigate to the root of the project and run npm run dev, that will start your local development server, Go to http://localhost:3000, There you will be able to see the following default Next.js homepage.

2. Dockerfile

Create a Dockerfile in root directory of your project, Exact Dockerfile with no any file extension.

Dockerfile

Dockerfile is like a step by step script that tells Docker how it is going to build contianer image.

Go ahead and add the following code into your Dockerfile .

FROM node:16-alpine

WORKDIR /frontend

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD npm run dev

Let me explain

FROM node:16-alpine will get a light weight Linux distribution with node version 16 installed on it, You can get image of any other OS you may prefer from Docker hub.
WORKDIR /frontend will initialize a working directory in your new OS.
COPY package*.json ./ will copy package.json into the working directory that we initialized in previous step.
RUN npm install will install all the dependencies of your project.
COPY . . will copy all the files from your current directory to the working directory of the container, You can use .dockerignore if you don't want to copy some files into your docker container.
EXPOSE 3000 will expose port 3000 from your container to local network, You can check more on that Here.
finally CMD npm run dev will start the development server from your container.

3. Creating your first Docker container

Open your command line and navigate to the root directory of your project and run docker build -t docker_nextjs:developement . It will start building your docker container with docker_nextjs name, you can change the name to whatever you like, I am using :development after name to assign the image with the development tag, and in the last I am using . to tell docker that the Dockerfile is in current folder.

NOTE:

Each time you will run this command, It will create a new image of your container, You can check what images are in your system by running docker images or docker image ls.

You can check more on that Here.

4. Running docker container

There are two ways you can run your docker container image, one is through your command line and other is through docker desktop GUI, To run through command line, Open your terminal and run docker run --publish 3000:3000 followed by the name and tag of your image.

In my case:

docker run --publish 3000:3000 docker_nextjs:developement

Through GUI:

Open Docker desktop add open the images tab, you will see all the images available on your pc, Select the one you want to start and click the run button, that should start it.

That is it, Now go to http://localhost:3000 you should be able to see the homepage of your Next.js application.

Note:

This article only shows how you can containerize your dev environment and make it portable, this article is not intended for production use.

Hopefully this article helped you, If you have any question or suggestion please feel free to mention that in comments below.

Thanks for reading!

Forem: Rashid Ali

How to add Dark mode in Next.js Application using Tailwind CSS.

What is Next.js?

What is Tailwind CSS?

Here is how you can add Dark mode to your Next.js application using Tailwind CSS.

Prerequisites:

1. Setting up a new Next.js project

2. Adding Tailwind CSS

3. Adding Dark mode

Edit _app.js

Note:

4. Creating the theme toggle component.

Let me break it down for you

How to add tailwind utility classes for dark mode.

Example:

Final steps

How to Dockerize a Next.js Application for beginners.

What is Docker and why you should use it?

Enough talking, lets see how you can Dockerize your Next.js or React App.

Prerequisites:

1. Setting up new Next.js project

2. Dockerfile

Dockerfile

Let me explain

3. Creating your first Docker container

NOTE:

4. Running docker container

Through GUI:

Note:

Edit `_app.js`