DEV Community: Sabbir Zzaman

How to add router progress bar in Next Js 13

Sabbir Zzaman — Mon, 21 Aug 2023 06:51:28 +0000

Getting Started

If you've found yourself struggling to implement a reliable router progress bar for your Next.js 13 project, don't worry – I've got a straightforward solution for you. Many of the existing packages for creating a route change progress bar became ineffective with Next js App route. But after some extensive searching, I stumbled upon a fantastic option that not only works flawlessly but is also incredibly simple to integrate.

Assuming you already have your Next.js app or website project set up, the first step is to install the nextjs-toploader package. This package will be the key to achieving the progress bar functionality you're looking for.



npm i nextjs-toploader



yarn add nextjs-toploader

In app/layout.js

Import the NextTopLoader component from the nextjs-toploader. And place the NextTopLoader component right above the {children} content, ensuring it's within the <body> of the JSX structure.



import NextTopLoader from 'nextjs-toploader';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}

Customization

Customize the router progress bar to your preferences is simple. Just add the desired props to the NextTopLoader component:



<NextTopLoader
  color="#2299DD"
  initialPosition={0.08}
  crawlSpeed={200}
  height={3}
  crawl={true}
  showSpinner={true}
  easing="ease"
  speed={200}
  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
/>

These props gives you control over various aspects, from color and animation speed to visual effects. Feel free to experiment and create a progress bar that aligns perfectly with your Next.js 13 project.

I hope the information provided here proves valuable in enhancing your Next.js 13 project. Adding a route change progress bar to your Next.js 13 project through the nextjs-toploader package is both easy and effective. If you have any further questions or need assistance, don't hesitate to reach out.

Happy coding!

Tailwind CSS Crash Course

Sabbir Zzaman — Thu, 17 Aug 2023 14:00:53 +0000

Introduction

Tailwind CSS is a highly popular and innovative utility-first CSS framework utility-first CSS framework that simplifies web development with ready to use utility classes.

What's you are going to learn?

Colors: Effortlessly apply a diverse range of colors.
Flex Layout: Create fluid and responsive arrangements.
Grid layout: Construct organized multi-column designs.
Specing: Achieve precise spacing through margin and padding utilities.
Sizing: Exercise complete control over element dimensions.
Customization: Infuse your unique style by extending utility classes.
Responsiveness: Craft adaptive interfaces with breakpoints and modifiers.

🎨 Colors

Inherit, current, transparent, black, white, grey, zinc, natural, slate, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

For most colors (except the first 5), you get a scale from 100 to 900, going up by 100 each time (with a larger jump at the end, reaching 950). This gives you a bunch of choices for each color, like light gray (gray-100), medium gray (gray-500), or dark gray (gray-900). If that's not enough, you can even add your own favorite colors by tweaking Tailwind CSS's settings. This way, your website can have exactly the colors you want, making it uniquely yours.

<nav class="bg-blue-100">
  <a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
  <a href="#" class="text-blue-300 hover:text-blue-500">About</a>
  <a href="#" class="text-blue-200 hover:text-blue-400">Services</a>
</nav>

🛠️ Flex layout

A tool for organizing elements in a straight line, whether you want them side by side or in a row. This comes in especially handy when you're working on layouts that need to adapt and look great on various devices.

Let's say you're building a card component for a product showcase. By using flex layout, you can easily align the card's image, title, and description horizontally. Here's a simplified code snippet in HTML and Tailwind CSS:

<div class="flex">
  <img src="product-image.jpg" class="w-1/3">
  <div class="flex-1 p-4">
    <h2 class="text-lg font-semibold">Product Name</h2>
    <p class="mt-2">Description of the product goes here...</p>
  </div>
</div>

In this example, the "flex" class creates a flex container, making the image and the content inside it flex items. The "w-1/3" class sets the image's width to one-third of the container's width, while "flex-1" ensures the content takes up the remaining space. The padding and margin classes (p-4 and mt-2) add spacing for a clean and organized appearance.

⚒️ Grid layout

A powerful tool that lets you create organized designs using rows and columns, providing meticulous control over how elements are positioned. This becomes particularly handy when you're aiming for a well-structured layout, ensuring that your content aligns perfectly and consistently.

Imagine you're crafting a gallery page with images. By grid layout, you can arrange the images into a neat grid pattern, making sure each one occupies its designated space while maintaining an appealing visual rhythm. Here's a basic code snippet in HTML and Tailwind CSS to illustrate:

<div class="grid grid-cols-3 gap-4">
  <img src="image1.jpg" class="w-full">
  <img src="image2.jpg" class="w-full">
  <img src="image3.jpg" class="w-full">
  <!-- Add more images as needed -->
</div>

In this example, the "grid" class creates a grid container, and "grid-cols-3" divides the container into three equally sized columns. The "gap-4" class adds a bit of spacing between the images for a polished look. Each image is assigned "w-full" to ensure it spans the full width of its grid cell.

📏 Specing

Tailwind CSS introduces practical classes that allow you to precisely manage the space around and within your elements. These classes, such as m-{size}, p-{size}, mx-{size}, and my-{size}, enable you to easily define margin and padding sizes, achieving the desired spacing in your design. The {size} Can be defined using a scale ranging from 0 to 96 representing multiples of 0.25rem.

Here's a code snippet in HTML and Tailwind CSS to exemplify:

<div class="bg-white p-4 m-2">
  <img src="product-image.jpg" class="w-full">
  <h2 class="text-lg font-semibold mt-2">Product Name</h2>
  <p class="text-gray-600 mt-1">Product description goes here...</p>
</div>

In this example, the "p-4" class adds padding of size 4 (16px) to the product entry. The "m-2" class adds margin of size 2 (8px) around the entire entry.

📐 Sizing

Tailwind CSS simplifies element dimensions through classes like w-{size}, h-{size}, min-w-{size}, and max-w-{size}. These classes grant you precise control over how big or small your elements should be. The {size} can be defined using fixed sizes, percentages, or using the responsive sizing approach.

Imagine you're crafting a profile card. With Tailwind CSS, you can effortlessly determine the width, height, minimum width, and maximum width of the card. Here's a straightforward code snippet in HTML and Tailwind CSS to illustrate:

<div class="bg-white p-4 w-72 h-96">
  <img src="profile-image.jpg" class="w-full h-48">
  <h2 class="text-lg font-semibold mt-2">John Doe</h2>
  <p class="text-gray-600 mt-1">Web Developer</p>
</div>

In this example, the "w-72" class sets the card's width to 18rem, while "h-96" gives it a height of 24rem. The profile image uses "w-full" to span 100% width of its container and "h-48" for a height of 12rem.

🔧 Customization

Tailwind CSS empowers your creativity with the ability to extend and add your own unique utility classes, enabling you to effortlessly tailor the framework to match your design preferences and branding.

Let's say you need to add custom colors. You can easily define your custom color in the configuration file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#007BFF',
      },
    },
  },
  variants: {},
  plugins: [],
}

Now, you can use your custom color in your HTML and Tailwind CSS classes:

<button class="bg-customBlue text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Click Me</button>

🖥️ Responsiveness

Tailwind CSS offers a ready-made toolkit of breakpoints for various screen sizes. You can also tweak tailwind default breakpoints classes from the configuration file (tailwind.config.js).

Predefined Breakpoints: Tailwind CSS comes with predefined breakpoints, tailored to different device screens.
Responsive Classes: Utilize classes like sm, md, lg, xl, and 2xl to apply styles precisely at specific breakpoints.

Apply responsive design effortlessly — for example, sm: text-lg adjusts font size starting from the small screen breakpoint.

With Tailwind CSS, crafting responsive designs that adapt to diverse devices becomes a seamless endeavor.

💡 Conclusion

Tailwind CSS is a powerful toolkit that simplifies web design. It offers easy ways to manage colors, arrange layouts, control spacing, and ensure your design works well on all devices. It's like having a versatile toolbox for creating beautiful and customized websites without the hassle. Learning Tailwind CSS opens the door to crafting websites that look great, work smoothly, and reflect your own unique style.

Thank you and happy designing!

Update All NPM Dependencies

Sabbir Zzaman — Wed, 08 Mar 2023 16:47:21 +0000

Dependencies and packages are getting updates and as a developer, it's important for you to keep your dependencies up-to-date. Today you will meet an amazing tool to keep your applications dependencies up-to-date.

Before getting started I always recommend you create a new branch before updating dependencies and test your application after updating dependencies. Then merge the branch with main branch.

Installing npm-check-updates

First, you need to install npm-check-updates in your machine globally. You can do this by running the following command in your terminal:

npm install -g npm-check-updates

Using npm-check-updates

Now that you have npm-check-updates installed. To get started open your terminal and navigate to your project directory and run the following command.

ncu -u

This will check for the latest versions of all your project's dependencies and then update your dependencies from package.json file with the latest version numbers. It will just replace the numbers not actually install the new versions.

Updated dependencies

Now just run the command npm install to install the updated dependencies. That's it! You have now successfully updated your npm dependencies using npm-check-updates.

Keeping your dependencies up-to-date is important for the security and functionality of your code. With npm-check-updates, this task becomes much easier and faster.

Thanks for reading!

PWA with Next Js 13

Sabbir Zzaman — Tue, 21 Feb 2023 20:50:15 +0000

What is PWA?

Progressive Web Applications (PWAs) are apps built with web technologies that we probably all know and love, like HTML, CSS, and JavaScript. But they have the feel and functionality of an actual native app.

Before we have to manage different code bases for web, android, and ios applications. But PWA makes developers life easy. Now we can manage all those with a single code base. We can turn any websites or web apps into a installable mobile application and use it in different platforms.

Benefits of PWA

Have Cross-platform compatibility.
They're fast and lightweight.
They work offline unlike other sites.
Push notifications functionality.
Low maintenance cost.

Example of a PWA

Twitter is a great example of a PWA, with its fast loading times, responsive design, and ability to function offline. The PWA version of Twitter can be accessed at the URL https://twitter.com/, and it allows users to browse and interact with tweets in a mobile-friendly and app-like interface. The Twitter PWA also supports push notifications, enabling users to receive updates and alerts in real-time. The PWA is designed to be accessible and optimized for all devices, including desktop and mobile, making it easy for users to stay connected and engage with their followers on the go.

What you're going to learn?

You can create a PWA with Next Js from startch.
You can convert your existing app with a PWA.

Next Js PWA Boilerplate

If you're more of a code-first kind of person, you can find a ready-to-go boilerplate here. However, I still recommend reading the rest of this post to gain a better understanding of how everything works together.

GitHub - sabbirzzaman/next-pwa

Or just run this command to clone the repository in the terminal. (TypeScript)

https://github.com/sabbirzzaman/next-pwa.git

For JavaScript

git clone -b with-js https://github.com/sabbirzzaman/next-pwa.git

Let's create a PWA

First open your terminal and create a Next Js project.

npx create-next-app@latest

Generate Manifest file

A manifest file is a JSON file that provides metadata and configuration details about a PWA. It contains information such as the app's name, icons, start URL, theme color, and display mode. The manifest file is used by web browsers to identify and install the PWA, allowing it to behave more like a native app on the user's device. The manifest file is also used by the browser to display the PWA's name, icon, and splash screen when the app is launched.

You can simply create a manifest.json file in the public folder and copy the below manifest and modify the name, colors, description, etc as par your requiremts. Or you can also generate a new one for you from this website: simicart

{
  "theme_color": "#3b82f6",
  "background_color": "#f8fafc",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "name": "Your App Name",
  "short_name": "your_app_name",
  "description": "A PWA boilerplate with Next Js TypeScript",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

This is how the public folder will look like after creating the manifest.json file.

Create _document file

Next you have to create a _document.js, _document.jsx or _document.tsx file the in the pages directory and paste the following code.

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link rel="manifest" href="/manifest.json" />
        <link rel="apple-touch-icon" href="/icon.png"></link>
        <meta name="theme-color" content="#fff" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

The _document.tsx file in Next.js is used to customize the HTML document served to the user's browser, allowing developers to add custom HTML head elements and modify the HTML structure of the page. It is executed only on the server-side during the initial rendering of the page and is commonly used to add server-side rendering support for CSS-in-JS libraries or to add global styles and scripts to the page.

Next PWA Configuration

In Next.js, developers can configure their project using the default configuration file, next.config.js. Simply open the file and paste the following code.

Note: if your project is not in TypeScript you can ingore the /** @type {import('next').NextConfig} */ line.

/** @type {import('next').NextConfig} */

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
});

module.exports = withPWA({
  reactStrictMode: true,
});

Some gitignores

After creating the build, you will see several auto generated .js files in your public folder. You don't need to keep those in GitHub. For ignoring those you can can paste those following lines in your .gitingore file.

# Auto Generated PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map

Local build and test the PWA

After completing the configuration process, you can test your Next.js application. To test the PWA locally, you need to create a new build. Stop the terminal and use the following command to create a build:

npm run build

Now that you have created a new build, you can run it locally.

npm run start

Alright, so now that you've created a fresh build, let's test it out on your local machine! Head over to http://localhost:3000 in your favorite browser and keep an eye out for the installable icon located in the right corner of the URL box. Click on that bad boy and you should be able to search for the app on your computer and run it like a pro!

That's it, folks! Now you know how to turn your Next.js website into a fancy PWA app. Cheers!