DEV Community: Stephen Gbolagade

How to Add "Last Used" Badge to Next.js Login Page

Stephen Gbolagade — Sat, 13 Sep 2025 11:37:45 +0000

Your users may get confused the next time they want to log in to your website due to multiple authentication methods. Adding a “Last Used” badge - as popularly seen on websites like lovable.dev, can fix this UX problem.

While offering multiple authentication methods is beneficial, users often face a common challenge: "What did I sign up with—Google or email?" This goes beyond user preference; it's a valid user experience (UX) concern.

This small friction can lead to failed login attempts, repeated password resets, and users abandoning your software altogether.

Adding a simple helper badge like "Last Used" or "Last Login" can solve this issue once and for all. In this post, I'll show you how to implement it. Although I'll use Next.js to demonstrate, the same logic applies to any frontend framework.

Here's what we'll do:

1. - Store the user’s preferred authentication method in LocalStorage.
2. - Create a “Last Used” Badge component.
3. - Add the component to the login page.

Disclaimer: I assume you're familiar with frontend development and have a project set up, so I won’t cover basics like starting a React.js project or handling states. I'll focus on the simple approach to adding the "Last Used" Badge, and you can complete the remaining logic yourself.

Let's start!

Step 1: Setting Up the Login Component

First, create a basic login component with multiple authentication options. The email and password fields aren't displayed initially—instead, a button acts as a placeholder. When clicked, it hides other methods and shows the email/password form.

It's also best practice to create reusable buttons for each authentication flow, e.g., . The badge component will be absolutely positioned for each method to improve UX.

'use client';

import { useState, useEffect } from 'react';

export const LAST_USED_KEY = '_app_last_login_method';

export default function LoginPage() {
  const [lastUsedMethod, setLastUsedMethod] = useState(null);
  const [showEmailFields, setShowEmailFields] = useState(false);

  // Load last used method on component mount
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const stored = localStorage.getItem(LAST_USED_KEY);
      setLastUsedMethod(stored);
    }
  }, []);

  // When email button is clicked, show the form fields and hide other auth methods
  const handleEmailLogin = () => {
    setShowEmailFields(true);
  };

  if (showEmailFields) {
    return (
      // Email fields component (implement your form here)
      <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
        <h2 className="text-2xl font-bold mb-6 text-center">Sign In with Email</h2>
        {/* Add your email/password form fields, submit button, etc. */}
      </div>
    );
  }

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-6 text-center">Sign In</h2>

      {/* Email/Password Login */}
      <div className="relative mb-4">
        <button 
          className="w-full p-3 border border-gray-300 rounded-lg hover:bg-gray-50"
          onClick={handleEmailLogin}
        >
          Continue with Email
        </button>
        {lastUsedMethod === 'EMAIL' && <LastUsedBadge />}
      </div>

      <div className="text-center text-gray-400 text-sm mb-4">OR</div>

      {/* Google OAuth */}
      <div className="relative">
        <button 
          className="w-full p-3 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center justify-center"
          onClick={() => handleGoogleLogin()} // Define handleGoogleLogin below
        >
          <GoogleIcon className="w-5 h-5 mr-2" /> {/* Assume GoogleIcon is imported */}
          Continue with Google
        </button>
        {lastUsedMethod === 'GOOGLE' && <LastUsedBadge />}
      </div>
    </div>
  );
}

Now, let’s create the badge component.

Step 2: Creating the "Last Used" Badge Component

The badge provides visual feedback about the user's last used method:

const LastUsedBadge = () => {
  return (
    <div className="absolute -top-2 -right-2 z-10">
      <span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full border border-blue-200">
        Last used
      </span>
    </div>
  );
};

The design is up to you. You can use a Badge component from libraries like Shadcn UI if preferred.

Step 3: Tracking Authentication Methods

Implement logic to save and retrieve the user's preferred method. Use a utility function to store it:

// Utility function to save login method
const saveLoginMethod = (method) => {
  if (typeof window !== 'undefined') {
    localStorage.setItem(LAST_USED_KEY, method);
  }
};

// Email/Password authentication handler (add to your form submit logic)
const handleEmailSubmit = async (formData) => {
  try {
    // Your authentication logic here
    const response = await signInWithEmail(formData);

    if (response.success) {
      // Save method on successful login
      saveLoginMethod('EMAIL');

      // Redirect to dashboard
      router.push('/dashboard');
    }
  } catch (error) {
    console.error('Email login failed:', error);
  }
};

// Google OAuth handler
const handleGoogleLogin = async () => {
  try {
    // Initiate OAuth flow
    const response = await signInWithGoogle();

    if (response.success) {
      // Save method on success
      saveLoginMethod('GOOGLE');

      // OAuth will handle redirect
    }
  } catch (error) {
    console.error('Google login failed:', error);
  }
};

If your app is highly security-sensitive, consider storing this in an httpOnly cookie via server actions or API routes instead of LocalStorage. I'm not aware of major security concerns with storing just the method type, but always evaluate based on your needs.

Step 4: Handling OAuth Redirect Flows

OAuth involves redirects, which can complicate tracking. Here's how to handle it.

For client-side OAuth:

// For providers that allow client-side completion
const handleGoogleLogin = async () => {
  // Save preference before initiating OAuth
  saveLoginMethod('GOOGLE');

  // Initiate OAuth flow
  window.location.href = '/auth/google';
};

For server-side callbacks with client notification (in Next.js):

// In your OAuth callback handler (/api/auth/callback/google.js)
export default async function handler(req, res) {
  try {
    // Handle OAuth callback logic
    const { user, session } = await processOAuthCallback(req);

    if (user) {
      // Redirect with login method parameter
      res.redirect('/dashboard?login_method=GOOGLE');
    }
  } catch (error) {
    res.redirect('/login?error=oauth_failed');
  }
}

Then, process the parameter on the client:

// Hook to process login method from URL params
const useLoginMethodTracker = () => {
  const router = useRouter();

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const loginMethod = urlParams.get('login_method');

    if (loginMethod) {
      saveLoginMethod(loginMethod);

      // Clean up URL
      const url = new URL(window.location);
      url.searchParams.delete('login_method');
      window.history.replaceState({}, '', url);
    }
  }, []);
};

// Use in your dashboard or protected pages
export default function Dashboard() {
  useLoginMethodTracker();

  return <div>Welcome to your dashboard!</div>;
};

Now, try to log out and log in to your website, log out again, and try to log in, you should see something like this:

That's all, and you're done!

From Solo to Shipped: How I built a functional product as a frontend engineer

Stephen Gbolagade — Mon, 27 Jan 2025 07:02:44 +0000

When we started VenddaHQ (https://vendda.co), I had a clear vision: empower small business owners to thrive online.

But I faced a common startup dilemma—no dedicated backend developers, no dedicated designers, just myself, Temitope Akinsunmade and an unwavering determination.

Like many founders, I fell into the trap: "I'll launch when I have the perfect team." After all, a successful product needs robust infrastructure and polished design, right?

Wrong!

That perfectionism was just procrastination in disguise. So I made a pivotal decision: start building with the tools at hand and scale as the customer base grows.

Then:

I Leveraged Next.js and its API routes for a streamlined, single-codebase solution (Frontend + backend logic)
Harnessed Supabase's power for auth, database, and real-time features
Embraced minimalist design principles focused on core functionality

The result? VenddaHQ is live, serving real customers, and evolving based on actual user feedback.

Key lessons that might help other solo founders:

Perfect is the enemy of shipped. Use the tools and skills you have today.
Users over features. Real feedback beats theoretical perfection every time.
Focus ruthlessly. Solve the core problem first; everything else can follow.

Don't think you can ship a bug-free code, even with your "perfect" team, there's no way you won't be fixing issues...

Google still have a lot of software engineers working for them and they're not playing golf there, but working to make Google products better.

To every entrepreneur waiting for the "perfect moment" to start: that moment is now. You don't need a team of specialists—you need the courage to ship and the wisdom to iterate.

Want to build your next MVP?

Skip the hiring spree. One experienced builder who knows how to ship at scale can take you further than a misaligned team.

...and I am that builder! 😉

You need your MVP fast? Talk to me, save time, ship fast and scale on.

Contact 👇

work[at]stephengade

Stop Using Local State for Filters — Here is why

Stephen Gbolagade — Mon, 06 Jan 2025 10:59:53 +0000

Have you ever lost all your carefully selected filters after accidentally refreshing the page?

It recently happened to me.

I was checking out a website, I filtered the item to the 20th page, then my mobile Hotspot got disconnected because someone called me.

After the call, the page reloaded and I had to start clicking again to get to the 20th page where I stopped.

What does this mean?

This means your company could be losing a lot of money due to this simple performance issue.

Or, how about a scenario in which you wanted to share your filtered search results with a friend but couldn't?

That's the problem with local state filtering.

Think of shopping on Amazon or any popular e-commerce website you know. Notice how you can:

Apply multiple filters
Share the exact product search with others
Bookmark specific searches
Go back to previous searches using browser buttons

That's all URL parameters in action!

Why URL Parameters Are Better than Local State:

— State persistency for Better UX

Whatever that happens, either a network glitch or an accidental reload, the state of your filtered or paginated data remains whenever the page is up again.

— Sharable link with filters

Of course, since the data state is kept in the URL, you can easily share it with anybody and they will see exactly what you want them to see.

Instead of: "Hey, select electronics, then set the price range to $100-500..."

Just share: yoursite.com/products?category=electronics&price=100-500

— SEO Benefits 🔍

Search engines can find and index your filtered pages. More visibility, more traffic!

I recently searched for a property with a keyword like this: 'Mini flat in Lagos', and one of the results I got on Google landed me on a filtered search result page showing me all available mini-flats in Lagos available on the property listing website.

Cool right?

— Easy & Fast Browser Navigation ⚡

Want to go back to your previous filter combination? Just hit the back button - it works

NOTE: This isn't about preference but building better, more user-friendly applications. Your users will thank you, and you'll save yourself from countless headaches!

TypeScript Best Practices — Using Index Signature

Stephen Gbolagade — Fri, 13 Dec 2024 08:35:51 +0000

Another day to escape from any h€ll in your TypeScript's project.

When fetching data, the best way to leverage the benefit of TypeScript's intelliSense is to define the types or interfaces of your data response.

That is, if you know the structure or the response schemas.

But in the case we are not sure of how the backend structured the response, we often default to using any just to tell eslint to keep quite.

TypeScript's Index Signature may be helpful in that case instead of any.

The best thing about Index Signature is that you can extend the data type as much as you like.

For instance, if you know the response also have an array or object value, you can explicitly define it when catching other key-value pairs at once.

Below is a snippet comparing Index Signature and any

Note again that the best way is to define your response schemas explicitly if you know how it is structured, otherwise use Index Signature or generics which I will be discussing next.

Index is helpful, try it out.

TypeScript Best Practices — Using Enums

Stephen Gbolagade — Tue, 10 Dec 2024 05:49:35 +0000

TypeScript is not just about validation, It's also about structure and today, let's talk about using ENUMS to save your team unnecessary hours of debugging.

In enterprise software development, we often use Typescript to ensure our data is consistent.

But aside from using any to deceive ourselves (not the machine), we also ignore the importance of ENUMS.

Here is a scenario:

Your company is developing a food delivery software and you have 3 type of users who can sign up as demonstrated in the snippet below.

Someone in your team used Vendor, another person used vendor, you used VENDOR

That's a simple bug that can waste hours of productivity.

Solution:

Use ENUM to define the structure of your user Role. ENUM is readonly and very strict, it'll get your team members in order.

Code snippets

// Do ✅️
enum Role {
  Vendor = "VENDOR",
  Customer = "CUSTOMER",
  Rider = "RIDER"
}

const userRole: Role = Role.Admin;

// Don't ❌️
const userRole = "VENDOR"; // Very badd

// learn moteat www.stephengade.com

TypeScript Best Practices — Part 1

Stephen Gbolagade — Mon, 02 Dec 2024 13:41:36 +0000

Having a source of truth for your Typescript file will not only make your code cleaner, but it will also help you fix any Type conflict that may arise as a result of duplicate types.

Do you know you can do this in TypeScript to make your code cleaner?

interface Author {
 id: string
 name: string
 posts: {
  title: string
  slug: string
}[]
}

Then:

type AuthorPosts = Author["posts"]

type AuthorPosts = Pick<Author, "posts">

instead of doing this repetition again:

interface AuthorPost {
 posts: {
  slug: string
  title: string
}[]
}

Note:

Snippet A and B extract the posts types from Author, the results are similar. One extract the full post type as an object while the other one extract only the child of the type.

Snippets:

Try it!

Do you know you can do this in TypeScript to make your code cleaner? interface Author { id: string name: string posts: { title: string slug: string }[] } type AuthorPosts = Author["posts"] OR type AuthorPosts = Pick

Stephen Gbolagade — Mon, 02 Dec 2024 12:56:44 +0000

PWA: Build Installable Next.js App that Works Offline

Stephen Gbolagade — Wed, 01 May 2024 12:25:56 +0000

Let's build and convert a simple Nextjs website to a Progressive Web Application (PWA).

But What is PWA?

According to MDN web docs, A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific (or native) app.

This simply means that with a single code written for your website, it can be made Installable on different devices either on Android, iOS, or Windows.

This PWA technology has been adopted by big companies like GitHub, Mozilla, Forbes, and many others.

You may wonder why these companies are creating an Installable website while their engineers can build (world-class) native apps.

The simple fact is that PWA does more than just install your website as an app, it offers a lot more. Let's talk about these benefits.

Benefits of Progressive Web App (PWA)

It can work offline and in the background
It is Installable so that you save money than developing native apps
It works on different devices with just a single code base
It is fast, faster than a traditional website or mobile app
It automatically engages with visitors to install the app, no additional set-up is needed
And many others

With all these benefits, it is recommended to convert a website to PWA. GitHub has a mobile app and a desktop app, but the company is still leveraging the power of Progressive Web App.

Setting up PWA for a Next.js website is simple and it takes just a few minutes. Let's get started!

Here is what I will be using in this tutorial:

Next.js 14.2 (App dir)
Typescript
Tailwind CSS
Service packages

Here is the demo of what we are doing in this tutorial.

Okay moving on.

You are familiar with the first 3 but maybe not with Serwist package.

Check it out on GitHub:

serwist / serwist

A Swiss Army knife for service workers.

Serwist is a collection of JavaScript libraries for progressive web apps.

It is a fork of Workbox that came to be due to the its development being stagnated. Most of the prior work was done by Google LLC's team and the community.

Documentation

Original works

View on GitHub

The Serwist package gives us access to convert our Nextjs website to a progressive web app without any expensive configuration, and yet still open room for further configuration if you want to take advantage of PWA to the fullest.

But the standard Serwist configuration works like magic and that is what I will do in this tutorial, you can then go on to read the package documentation for further configuration.

It is worth noting that Serwist works for other frameworks like Svelte, not just Nextjs.

How to Convert Nextjs Website to a Progressive Web App

Step 1: Build a Next.js app

You can use any of your existing Nextjs projects or Bootstrap a new one with yarn create next-app or npx create-next-app.

It doesn't matter if you choose Page or App directory, anyone works.

If your Nextjs app is up and running, let's go to the next step.

Step 2: Install Serwist packages for PWA

Run the following in your terminal to install all the packages we need from Serwist.

For NPM: npm i @serwist/next && npm i -D serwist
YARN: yarn add @serwist/next && yarn add -D serwist

Before moving on, you may be wondering why Serwist?

Because it is so powerful. It helps do the heavy service worker configuration and finally, the package is maintained to date.

There are other PWA packages like next-pwa but I don't recommend it as the last update on the package was 2 years ago… A lot has changed two years ago.

So Serwist is the chosen one.

Step 3: Configure your website's Manifest

Create a new file in the public or app folder called manifest.json. We need to put your app Metadata here.

Web app manifest or simply manifest.json as it's popularly called is a file that contains your website Metadata. Although most of the time, we don't care about this file but for your Nextjs PWA to work, it is a must to set up a correct manifest.json file.

There are many web app manifest generators out there you can use such as this one by Simicart (click to generate yours).

Once you're done generating the JSON file, copy the Metadata code into your manifest.json file.

Your app needs icons, don’t worry about creating one, simply download it as a Zip button. A file will be downloaded, extract it, and copy the 4 images generated for your project.

Kindly note that the icons you copy to your project must be accessible in the manifest.json file, otherwise PWA might not work.

But this is not all.

A manifest.json file must have a unique ID so the cached file from website A doesn't get mixed with website B.

Update your manifest.json with this:

// manifest.json

   "id": "your-unique-id",
    "dir": "ltr",
    "lang": "en",
    "categories": [
      "business",
      "food",
      "shopping"
    ], //app categories
    "prefer_related_applications": false,
  "iarc_rating_id": "13", // minimum age of your prospective users

Step 4: Register your manifest.json file in your app

Right now, you have the correct manifest.json file but your app doesn't recognize it yet.

To register it, we just need to tell Nextjs that we have it. We'll make use of Nextjs’ Metadata

Open your src folder, locate and open appfolder, in your layout.tsx file, add this code just before you export the RootLayout:

export const metadata: Metadata = {
  metadataBase: new URL(“your base url"), // use a correct url otherwise your app won’t build
  title: "title of your app",
  description: "your app description here",
  category: "website",
  generator: "Next.js", // framework used

// the big is here 
  manifest: "/manifest.json", 
}

For the sake of this tutorial, we are concerned about registering the manifest.json file. When you are free, you can further add more details in the Metadata, and check online how to set it up.

We are almost done.

Step 5: Set up the Service worker files

Service Worker are the backbone of PWA, unfortunately this tutorial is not about that. To learn more about Service Worker, check this helpful article.

Now your src create a new folder called “service-worker”, inside it, create a file called app-worker.ts

The name can be anything and you can't place the parent folder anywhere, for instance, in the public folder but it's better to put in the src or public.

Put this code in the app-worker.ts file:


import { defaultCache } from "@serwist/next/worker";
import type { PrecacheEntry, SerwistGlobalConfig } from "serwist";
import { Serwist } from "serwist";

// This declares the value of `injectionPoint` to TypeScript.
// `injectionPoint` is the string that will be replaced by the
// actual precache manifest. By default, this string is set to
// `"self.__SW_MANIFEST"`.
declare global {
  interface WorkerGlobalScope extends SerwistGlobalConfig {
    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
  }
}

declare const self: ServiceWorkerGlobalScope;

const serwist = new Serwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: defaultCache,
  fallbacks: {
    entries: [
      {
        url: '/offline', // the page that'll display if user goes offline
        matcher({ request }) {
          return request.destination === 'document';
        },
      },
    ],
  },
});

serwist.addEventListeners();

This code is directly from the serwist tutorial, so it is advisable to check their documentation to understand what's happening here.

Right now you’ll be seeing a TypeScript error, to fix that, go to your tsconfig.json add this code just below the target: es5:

 "lib": ["dom", "dom.iterable", "esnext", "webworker"],
    "types": ["@serwist/next/typings"],

The error should have been fixed.

PS: I put my service-worker folder, manifest.json, and the icons in the public folder. My structure is like this:

Step 6: Reconfigure your `Next.config.js` file

The file is located in the root directory, I assume you don't have anything there, If that's the case, clear whatever is there and put this code:

const {
  PHASE_DEVELOPMENT_SERVER,
  PHASE_PRODUCTION_BUILD,
} = require("next/constants");

/** @type {(phase: string, defaultConfig: import("next").NextConfig) => Promise<import("next").NextConfig>} */
module.exports = async (phase) => {
  /** @type {import("next").NextConfig} */

// Your current or future configuration 

  const nextConfig = {

  };

  if (phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD) {
    const withSerwist = (await import("@serwist/next")).default({
      swSrc: "src/service-worker/app-worker.ts",
      swDest: "public/sw.js",
      reloadOnOnline: true,
    });
    return withSerwist(nextConfig);
  }

  return nextConfig;
};

There are important things to take note of here.

In the const nextConfig = {} object, you can put your current Nextjs configuration if you have any, otherwise feel free to leave the object empty.

The one that follows is checking if you're on development or you've built the project, if yes, Serwist will do its magic.

We have 3 things to also take note of in the object:

swSrc: "src/service-worker/app-worker.ts",
swDest: "public/sw.js",
reloadOnOnline: true,

The first one is straightforward, that is the location of our service worker configuration we set up earlier. Again, ensure that you are accessing that path correctly.

The second one is where the generated service worker code will be located, in this case, inside the public folder.

The last one is simply asking if to reload when the user has an active internet connection. For instance, the user may be accessing your app offline and when the internet is available, setting this to true will try to get the website from the server not from the cached storage.

Final step: Build and test your app

If everything is set up correctly, you can now build your project by running yarn build or npm run build

When it's successfully built, check your public folder, you should see a new file called sw.js, it contains some random minified code, don't edit anything.

You now have converted your Nextjs website to PWA, and users can now install it as an app.

Deploy the project to your preferred hosting provider and you're good to go.

Evidence that your PWA feature is working, when you visit your website, you should see this prompt that says “Install…” like below:

if you can see that, hurrah!

Don't forget that you can still achieve more with Service Worker such as push notifications etc, try to read more about Service Worker and PWA technologies.

Before I leave, let me talk about common errors and solutions when converting your Nextjs website to PWA.

Unable to install next-pwa or serwist packages

Make sure your app is not running on your local server, if it's running press CTRL C to stop it.

Permanently delete your node_modules file with SHIFT + DELETE.

Install your app packages and dependencies again by running yarn install or npm install.

Finally, install the serwist packages again.

Done everything correctly but PWA is not working

It's possible that your manifest.json is not accessing the correct path for the icons. If this is the case, the safest solution is to move those icons to the public folder.

Note that you can access items in your public folder by simply starting with forward / e.g to access the image folder in the public folder, you do /images/…

Thank you for reading.

Don't forget to share this article with someone if it's helpful.

How to Handle Dynamic Routing in Next.js

Stephen Gbolagade — Sat, 06 Apr 2024 16:41:05 +0000

Routing is important in every software application. Dynamic routing helps with the scalability and performance of the application.

For a simple portfolio website, you can have static routes like /about, /contact, etc.

But you will deal with many routes or URLs when it comes to web applications like an eCommerce website, social media application, etc.

Imagine software engineers at Facebook trying to build a dedicated page for each user who signs up. That will be billions of static URLs and one thing is that these dedicated pages have the same UI (though different data).

React and some other frontend libraries have solved the issue of duplicate UI design with reusable components. Also, you no longer need expensive configuration to dynamically or statically set URLs.

You can handle millions of incoming URLs with a (dynamic) URL setup.

This is a quick demo of what we will be handling in this tutorial.

You are quite familiar with this system, let's talk about how it works and how to do it.

How Does Dynamic Routing Work?

First: Understand the structure of your application

For instance for blog posts, the structure can be like /articles/[blog-post]. This means all the blog posts are placed in a folder called articles inside the Page folder (in the Page directory) or the App folder in the App directory.

e.g


 page
   | -- articles
        | -- [blog-post].tsx

 app
   | -- articles
        | -- [blog-post]
             | -- page.tsx

Second: There must be a unique identifier.

This unique identity could be the slug, username, or id of the product or blog post.

So that when you go to /user/${username}, the details of the username will be fetched and not someone else.

Note that often, id is automatically generated at the backend for each item created and added to the database. Most developers will use the id since it's by default unique.

But id is very ugly. Imagine a link like /product/138jeknfhklejklrkn3773994889, while this will work, it is not recommended especially for SEO sake…

So the backend developers can work on what we call slug, so that your product page will look something like this: /product/justin-bieber-merch-3eti.

The username approach is common when dealing with social media apps or marketplace software.

For instance Dev.to makes use of the community member username as a dynamic routing identifier. E.g dev.to/stephengade. But for articles, dev.to uses slug approach by concatenating the blog post title with a unique ID.

Twitter also does the same thing e.g twitter.com/stephen_olgade

These usernames are unique for each user.

Whichever one your development team decides to use, whether slug or ID or username, it must be unique for each page to be rendered.

Let’s put all this into action!

Routing in Nextjs

We don't have a backend for this tutorial but we have a mock data service to use.

I already have a starter project from my previous article on how to build a functional search bar in Nextjs, you can check the code here.

The file structure is pretty straightforward.

If you cloned the repository, install all the dependencies by running yarn install and start the project with yarn dev.

You don’t need to use my project structure, you can use the idea in this tutorial to set up a new project for yourself or use it in your existing project.

This is what we want to do

Render a list of user profile cards on the homepage
If a card is clicked, it shows the profile details of the user.

That’s all.

We have built the user profile card and rendered it on the homepage. If you click on a card, nothing is happening yet, that leaves us to the second step.

How to Handle Dynamic Routing in Nextjs

As said earlier, there must be a unique ID or a king of slug to handle the dynamic routing otherwise your application will throw an error.

In this project, I will be using the username because it is unique for each card and that makes more sense in real-life scenarios. For instance www.twitter.com/{{username}}

So this is what we want to do, when we click on the card, we will push the username to the URL (to your desired structure).

Let’s do both methods, the nested structure or root directory structure.

The root directory method:

In your app folder, create a square folder and call it anything (assuming you’re using the App directory).

To create a square folder in the Nextjs App directory, wrap the group name in squared brackets. E.g. [user]. The reason we are doing this is that we don’t want Nextjs to see the folder as a path. Remember that any folder in the app directory is considered a navigation path.

In the [user] folder, create a page.tsx file.

In the page.tsx file, put this code:

const UserProfileRoute = ({ params }: { params: { user: string } }) => {
  const username = params.user;
  return <h2>This is {username}</h2>;
};


export default UserProfileRoute;

What happens here:

In the Nextjs page route, we have access to the current URL parameter by simply destructuring the name of our square bracket folder from params

So this const username = params.user will be the value of the item we push to the URL. Let’s see this in action.

Remember we have a profile UI built that does nothing when we click on it, let’s fix that.

Since we want to show the user profile page on the root directory as we set up already, update your profile card with this:

import Image from 'next/image'
//Import the profile interface from data.js

import { iProfile } from "../services/data";
import Link from 'next/link';

export const ProfileCard = (props: iProfile) => {


    const { name, email, username, role, photo } = props;


    return (
        <Link href={`/${username}`} target="_blank">
        <div className="profile__card rounded-[15px] border border-solid">
            <Image src={photo} alt={username} className="h-[200px]" height={1000} width={400} />


            <div className=" bg-slate-300 p-3">
                <h2 className="">Name: {name}</h2>
                <p>Role: {role}</p>
                <p>Email: {email}</p>
                <p>follow @{username}</p>


            </div>
        </div>
        </Link>
    )
}

Note that we only push the username to the URL. If everything is done correctly, we can test it now:

You can customize this to fetch and render the user data on that page instead of just displaying the username.

The nested routing method

It’s just the same thing we have done, but this time, you will put the square bracket folder inside another (parent) folder.

For instance, if you want the user profile to access with a link like /user/{username}, you will name the parent folder ‘user’.

And the Profile card UI you wrapped with:

<Link href={`/${username}`}> </Link>

will be updated to

<Link href={`/user/${username}`}> </Link> ## note the /user/ the name of the folder which is the path

Build OTP Input Field in React — No Package Needed

Stephen Gbolagade — Sat, 13 Jan 2024 22:50:00 +0000

A lot of products are incorporating the idea of One-Time Password (or simply OTP) over sending users a link for them to click so they can be verified.

I'm not going to discuss the differences or advantages of using one over the other, but in this tutorial, you will learn how you can build the OTP Input component in your React application.

Previously, I have highlighted a step-by-step guide to building a tag input field without any package, you can check it out here.

If you're a front-end developer using other technologies like Vue.js, you can still learn by checking the logic of the component.

To ensure we are on the same page, this is an image showing what a typical OTP Input component looks like:

Image credit: REDDIT

Now, let's break down our approach to solving this problem.

We will render input fried dynamically from the number of digits the OTP pin will be. For instance, if the OTP is 5 digits or characters, we will render 5 input. If it's 6 characters, we'll render 6 inputs, and so on.

When the user enters a character, the focus will be automatically set on the next and when it gets to the last one, we trigger the submit function or handle any logic we want to handle
Because we are human, we are prone to make mistakes.

When our users make mistakes entering the OTP, they can delete or clear the characters to start again.

Let's start right away.

Step 0: Bootstrap a React.js App

You can skip this step if you want to integrate into your existing project. But if you're starting afresh, you can Bootstrap a React.js application using Vite, Nextjs, or any framework of your choice.

To learn more about creating a React app, check the official documentation.

I will be using Typescript and Tailwind CSS in this tutorial, kindly take note of that during your installation. You can skip Typescript since it's a small project.

When you're done installing, cd into your project folder, clean up the default code, and get ready for the next step.

Step 1: Create the OTP Component

In your component folder, create a new file called OTPInput.tsx, you can use .jsx if you don't want to use Typescript.

Inside this file, add this code:

import React, { useRef, useState, KeyboardEvent, ChangeEvent } from 'react';


type InputProps = {
    length?: number;
    onComplete: (pin: string) => void;
};

Note: if you're using Nextjs, don't forget to use use client at the top of your file.

So far, all we have done is import the hooks we will be needing for our components. We then define the typing for the props we want to be lifting from this component.

length: how many digits we want to accept
onComplete is a function that will be triggered immediately when the last number is entered.

Now, to the step.

Step 2

Create a React component that lifts 2 props as defined above, and returns the input fields. Before we do that, think of a possible way we can render the input field.

Let's say you want to verify a User immediately when they sign up and you are sending 4 digits to the backend, you may think of creating 4 different input fields to handle the PIN CODE.

But what if in the same project, you need to verify the same user when he went to change his password, but now the backend is sending an 8-digit PIN CODE, are you doing to create another OTPInput component again?

Well, it's not a smart idea.

Let's use a simple JavaScript array method called fill... we just defined a length of props that's dynamic, right?

What we will do is to grab the length and fill it to an input field. For instance, if the length is 5, we fill it into an input and it becomes 5 input fields.

If you want to take 8 digits, it becomes 8 input fields, and so on without manually creating the 8 inputs.

So let's do just that:

const OTPInput = ({ length = 4, onComplete }: InputProps) => {
    return (
        <div className='grid grid-cols-4 gap-5'>
            {Array.from({ length }, (_, InputIndex) => (
                <input
                    key={InputIndex}
                    type='text'
                    maxLength={1}
                    className={`border border-solid border-border-slate-500 focus:border-blue-600 p-5`}
                />
            ))}


        </div>
    )
}


export default OTPInput

At this junction, we are not doing another logic, just styling our input but note how we use the Array.from(number).

Also, note I'm using grid-cols-4 meaning that the inputs should take 4 columns per role. You can use flex instead of grid or alter the grid column to fit your desired style.

But now let's keep track of the input field using the hooks we imported useRef and useState.

Before I return the input, I will have:

//If you're not using Typescript, simply do const inputRef = useRef()


const inputRef = useRef<HTMLInputElement[]>(Array(length).fill(null));


// if you're not using Typescript, do useState()
const [OTP, setOTP] = useState<string[]>(Array(length).fill(''));


const handleTextChange = (input: string, index: number) => {
    const newPin = [...OTP];
    newPin[index] = input;
    setOTP(newPin);

    // check if the user has entered the first digit, if yes, automatically focus on the next input field and so on.


    if (input.length === 1 && index < length - 1) {
        inputRef.current[index + 1]?.focus();
    }

    if (input.length === 0 && index > 0) {
        inputRef.current[index - 1]?.focus();
    }

    // if user has entered all the digits, grab the digits and set as an argument to the onComplete function.


    if (newPin.every((digit) => digit !== '')) {
        onComplete(newPin.join(''));
    }
};

This is the basic logic block we need to handle the OTP Input component. But what do we have here?

We are using React's useRef hook to store and persist each of the input values without triggering any rerender.

Then we are using the const [OTP, setOTP] = useState() to keep track of all the values.

Again, useRef for individual digits or input, and useState for all the digits.

The handleTextChange is expecting two arguments, the input and index of that input which we will pass in the returned JSX component.

In the function:

We grab the user input and set them in an array. So immediately a user types in something, it is stored in that array. And finally, it updates our OTP array using the setOTP.

Then we access each value by its index and save each indexed value as simply input.

The next three if-statements help us validate the input in real time and each validation is explained with a comment in the code.

Note that the onComplete props we passed is a function that we can trigger immediately after the input fields have been filled to submit the values to the backend.

Finally, we need to update the returned input component with our ref and handleTextChange.

The updated returned input is:

// ….. previous code ….


return (
    <div className={`grid grid-cols-4 gap-5`}>
        {Array.from({ length }, (_, index) => (
            <input
                key={index}
                type="text"
                maxLength={1}
                value={OTP[index]}
                onChange={(e) => handleTextChange(e.target.value, index)}
                ref={(ref) => (inputRef.current[index] = ref as HTMLInputElement)}
                className={`border border-solid border-border-slate-500 focus:border-blue-600 p-5 outline-none`}
                style={{ marginRight: index === length - 1 ? '0' : '10px' }}
            />
        ))}
    </div>
);

The significant change here includes:

Key: Since we are mapping an array, we need to specify a unique key to each input field that will be generated.
maxLength: Each input field must take in a single value
VALUE: If a user enters 2345 for example, we are setting the value of each input field to the entered OTP concerning their index. i.e.: the first field will have 2, the second will have 3, and so on.
onChange: We are using the handleTextChange function here and we invoke the function whenever a user enters a value.
ref: we are keeping track of the active input field, remember we defined a useRef() hook above.

Now we are done.

Let's stitch everything up, so here is the full OTPInput.tsx component.

import React, { useRef, useState } from 'react';


// declare type for the props


type InputProps = {
  length?: number;
  onComplete: (pin: string) => void;
};


const OTPInput = ({ length = 4, onComplete }: InputProps) => {
  // if you're not using Typescript, simply do const inputRef = useRef()


  const inputRef = useRef<HTMLInputElement[]>(Array(length).fill(null));


  // if you're not using Typescript, do useState()
  const [OTP, setOTP] = useState<string[]>(Array(length).fill(''));


  const handleTextChange = (input: string, index: number) => {
    const newPin = [...OTP];
    newPin[index] = input;
    setOTP(newPin);


    // check if the user has entered the first digit, if yes, automatically focus on the next input field and so on.


    if (input.length === 1 && index < length - 1) {
      inputRef.current[index + 1]?.focus();
    }


    if (input.length === 0 && index > 0) {
      inputRef.current[index - 1]?.focus();
    }


    // if the user has entered all the digits, grab the digits and set as an argument to the onComplete function.


    if (newPin.every((digit) => digit !== '')) {
      onComplete(newPin.join(''));
    }
  };


  // return the inputs component


  return (
    <div className={`grid grid-cols-4 gap-5`}>
      {Array.from({ length }, (_, index) => (
        <input
          key={index}
          type="text"
          maxLength={1}
          value={OTP[index]}
          onChange={(e) => handleTextChange(e.target.value, index)}
          ref={(ref) => (inputRef.current[index] = ref as HTMLInputElement)}
          className={`border border-solid border-border-slate-500 focus:border-blue-600 p-5 outline-none`}
          style={{ marginRight: index === length - 1 ? '0' : '10px' }}
        />
      ))}
    </div>
  );
};


export default OTPInput;

We can now use the component in our project but don't forget to pass values to the length and handle the submit event to trigger to invoke the onComplete props.

Here is an example to use the component.

In page folder Create a new file called VerifyUser.tsx and put this code:

// import the OTP Input component


import React from 'react'
import OTPInput from 'the-path'


const VerifyUser = () => {
    // handle OTP Submit
    const handleSubmit = (pin: string) => {
        // handle api request here but I'm console logging it
        console.log(pin)
    }


    return (
        <section className='h-screen w-screen flex flex-col justify-center items-center'>
            <h2>Verify OTP</h2>


            <p>An OTP has been sent to your email address, kindly enter them here</p>


            <OTPInput length={5} onComplete={handleSubmit} />


        </section>
    )
}


export default VerifyUser

What's happening:

Note that we are passing 5 as our length, meaning we will have 5 input fields for the OTP.

Then we simply pass handleSubmit to the onComplete props. Note that in our OTPInput.tsx, we have passed the user-entered input values as arguments to the onComplete function. We then invoke that function with handleSubmit

That's everything and it should be working as expected. You can of course modify the design and logic to suit your project's needs.

If you have any questions, I will be glad to answer as much as possible. Thank you for reading.

Build Tags Input Field in React.js — No package Required!

Stephen Gbolagade — Tue, 02 Jan 2024 00:27:55 +0000

Do you want to collect multiple values using a single input field in your application? Then what you need is a Tags Input field or any name you can call it such as keywords input.

Just as its name suggests, the Tags or Keywords Input field allows you to take multiple values from users without duplicating the input field.

Here is a visual demo of a typical Tags Input field when creating a gig on Fiverr:

Aside from Fiverr, many other websites use such tags' input components to achieve similar goals.

In this article, you will learn how you can build and customize a tags input field in React.js without installing any third-party package.

Here is what we want to do:

Create an array of strings to hold our tags and keep track of it
Keep track of the user input
When the user hits the Enter button, the input value should be stored or updated in the array
When the user clicks the "x" icon, it should delete the added tag
We should set the maximum number of tags we need users to add to the array.

To make our code neater, we'll be building a custom hook to handle the logic.

Let's get started!

Step 0: Bootstrap a React Project

Kindly skip this part if you already have a project.

To bootstrap a React application, I will be using the Next.js framework. You can use any framework of your choice.

If you would also like to use Nextjs, run the command below to get started:

yarn create next-app

Follow the prompts as you wish, but I will be using Tailwind CSS, Typescript, and the App router.

Once it's done installing, cd into the project folder, remove the unwanted code in the index folder and global.css, and then finally run your project.

Step 1: Create the useTag hook

Create a new folder called hooks, inside the folder, create and name it useTag.tsx.

This hook will take care of issues 1, 4, and 5 listed above.

import React, { useState } from "react";

const useTagInput = (maxTags = 5) => {
  // Keep track of the tags array.

  const [tags, setTags] = useState<string[]>([]);

  // Function to handle adding the tag to the array

  const handleAddTag = (newTag: string) => {
    if (newTag && !tags.includes(newTag) && tags.length < maxTags) {
      setTags([...tags, newTag]);
    }
  };

  // Function to remove tag from array
  const handleRemoveTag = (tag: string) =>
    setTags(tags.filter((t) => t !== tag));

  // Return tags and functions from the hook

  return { tags, handleAddTag, handleRemoveTag };
};

export default useTagInput;

That's everything we need for our custom hook. As you can see it's pretty simple.

We are passing maxTags as a parameter to enforce the maximum values users can add to the array. And we set the default to 5.
In the handleAddTag function, we are expecting a value (the user input) and before we add the value to the array, we check if it doesn't exist in the array and if the items in the array are still less than the maximum number of tags we allow.
In the handleRemoveTag, we are also expecting a value (added tag), and once we get the value, we simply filter (delete) it out of the array.

Now, let's move on to the UI where we will be making use of this hook.

Step 2: Build a TagField component

In your project structure, you should have a components folder. Inside that folder, create a new file and call it TagField.tsx

We only need to customize our input here and lift props so that we can use it anywhere in our application.

Here is my code:

import { useState, ChangeEvent } from "react";

interface iTag {
  tags: string[];
  addTag: (tag: string) => void;
  removeTag: (tag: string) => void;
  maxTags: number;
}

export const TagField = ({ tags, addTag, removeTag, maxTags }: iTag) => {
  // track the use input

  const [userInput, setUserInput] = useState<string>(" ");

  // Handle input onChange

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setUserInput(e.target.value);
  };

  // handle Enter key press

  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault(); // Prevent form submission or new line creation

      if (
        userInput.trim() !== "" &&
        userInput.length <= 12 &&
        tags.length < maxTags
      ) {
        addTag(userInput);
        setUserInput(""); // Clear the input after adding a tag
      }
    }
  };

  return (
    <div className="flex flex-col w-[300px] md:w-[400px]">
      <input
        name="keyword_tags"
        type="text"
        placeholder={
          tags.length < maxTags
            ? "Add a tag"
            : `You can only enter max. of ${maxTags} tags`
        }
        className="w-full border border-gray-300 rounded-md px-4 py-2"
        onKeyDown={handleKeyPress}
        onChange={handleInputChange}
        value={userInput}
        disabled={tags.length === maxTags}
      />

      {/* ===== Render the tags here ===== */}

      <div className="flex flex-row flex-wrap gap-3 mt-4">
        {tags.map((tag: string, index: number) => (
          <span
            key={`${index}-${tag}`}
            className="inline-flex items-start justify-start px-3 py-2 rounded-[32px] text-sm shadow-sm font-medium bg-blue-100 text-blue-800 mr-2"
          >
            {tag}
            <button
              className="ml-2 hover:text-blue-500"
              onClick={() => removeTag(tag)}
              title={`Remove ${tag}`}
            >
              &times;
            </button>
          </span>
        ))}
      </div>
    </div>
  );
};

That's everything we need for the TagField component. But here is what is happening in the component;

We are lifting 4 props: maxTags, addTag, removeTag, and tags. We will pass values from our hook to these props whenever we want to use the TagField component.
The handleInputChange function simply listens to what the user is typing.
The handleKeyPress function will be invoked whenever the user presses "Enter". But to ensure we are adding a valid input, we are checking if the user input is not empty, if the user input is not more than 12 characters, and if the tags array is not up to our maximum tags.
Then finally we return a tailwind-styled input to accept the values.
Under the inputs, we rendered the tags and styled them with tailwind. Note that on the rendered tag, we put a delete icon (x), when clicked, it will invoke the removeTag function.

Okay. We've done a lot. But just one last step and we're good to go.

Step 3: Use the TagField component

The moment of truth is here! Let's see what we've been building. Go to the page folder, and create a new file called FormPage.tsx, and put this code:

"use client";

// import the hook

// import the TagField

const FormPage = () => {
  //define the MaxTags

  const MAX_TAGS = 5;

  //Retrieve all the returned items from the hook

  const { tags, handleAddTag, handleRemoveTag } = useTags(MAX_TAGS); // pass the maximum tags

  // Handle form submission

  const handleSubmit = () => {
    // Send tags to the backend
    console.log(tags);
  };

  return (
    <section className="h-screen w-screen flex justify-center gap-y-4">
      <form>
        <TagField
          tags={tags}
          addTag={handleAddTag}
          removeTag={handleRemoveTag}
          maxTags={MAX_TAGS}
        />

        <button
          onClick={handleSubmit}
          className="bg-blue-600 text-white outline-none border-none"
        >
          Submit Tags
        </button>
      </form>
    </section>
  );
};

export default FormPage;

Then go to the App.tsx and return only this component there. You should have something like:

// import FormPage

const App = () => {
    return <FormPage />
}

export default App

That's all and your app should be working perfectly.

Here is a demo of what we just built:

Note that you can further customize this design to suit your need or project design system but the hooks and functionality here will always work for most of the Tag Input fields you need.

Feel free to comment or contact me for any questions and I'll be happy to assist.

Thanks for reading!

Data Pagination in Next.js with Custom Hooks

Stephen Gbolagade — Sat, 09 Dec 2023 21:51:34 +0000

Data pagination is a concept you are familiar with even if you're not a web developer. You have seen and read different books, and when you finish reading page 1 of the book, you open to page 2 and so on.

Imagine there is only one page for a whole textbook, do you think it will be easy for you to read and navigate through it? Definitely not.

That's the same problem your user may face when you ignore pagination in your web application. Not only that but also:
The website will be slow as a lot of data has to be loaded and displayed.

The bigger problem is the heavy load on your server as it has to return a large volume of data at once

Imagine you are working at Shopify, a company with over 1.7m merchants, and you are tasked to create a page that returns the basic information of each of the 1.7m merchants. But if you ignore pagination, you will have to face your manager and explain what motivates you.

Pagination is not only needed when you're handling millions of data but also when you want to organize and present a large volume of data very nicely to the user.

But where is the best place to handle data pagination?

Without mincing a word, the best place to handle pagination is the backend. Because the backend engineers have access to the database and they design the APIs, it is easy for them to paginate how the data is sent to the frontend.

Not only because it is easy for them, but also optimizes the overall performance of both frontend and backend.

That doesn't mean as a frontend developer, you have no business with data pagination, you do because you have to handle the frontend logic for pagination as well.

That's what we will do in this tutorial.

But we don't have an API to work with, so I will be using mockup data. But it's still the same experience you'll have while working with a backend app.

Simulating Backend Data Pagination

A typical backend API that returns paginated data will only allow you to fetch a specific number of data at once (for instance 20), and if the user needs to see more, they have to request another 20, and so on.

So the data of 115 users will be paginated to 6 pages. That is, 20 users for each of the 5 pages, while the 6th page will have 15 users.

The api can be in this format: {{BaseURL}}/data?page={currentPage}&limit={dataLimit}

The BaseURL is the host domain name of the API
/data is the exact location where the users are stored
?page={currentPage} helps the frontend and backend to know which page is the user currently
&limit={dataLimit} means how much data should be returned at once.

Let's say the backend has 115 users and you want to display 20 users at once, that's the limit.

On initial fetch at the frontend, the currentPage will be 1 showing just 20 users only.

If the backend has paginated the data already (which should be), please use the flow when handling your frontend pagination, don't do it raw on the frontend because the essence of paginated won't be achieved. So stick to backend API documentation.

If you click on NEXT, the currentPage will be updated to 2 telling the backend to send the next 20 users and so on. If you click PREV, it'll decrement the currentPage, i.e. page 2 becomes 1.

** Let's get to work now **

Step 1: Bootstrap a new Next.js app

If you followed my previous article, you don't need to create a new Next.js app as I will be continuing from where I stopped there.

You can check the article: Build a Functional Search Bar in Next.js

Or you can create a new Next.js app by running yarn create next-app and following the prompts.

Then proceed to create a mockup data of 100 users or you can fetch 100 fake posts with this API: https://jsonplaceholder.typicode.com/posts

Display the response with a nice PostCard. You should be seeing 100 posts. If that works, let's go to the next step.

Step 2: Creating the Pagination Hook

Hooks in React help us use functions or logic over and over again without rewriting that function again.

Whether you're using a backend API or mockup data, we will create custom hooks for both cases.

In your src folder, create a new folder called hooks. You can put all your Hook files in this folder for consistency.

Inside the hooks folder, create a new file called usePaginate.tsx or with .jsx if you're not using Typescript.

Put this code there:

I have explained what each line of code does with comments. In the code, there are two different hooks called there to handle the two scenarios.

Kindly note that I am using axios to fetch data, you can use the native fetch too.

Step 3: Update your data component with the Hook

import the pagination hook concerning if you're working with mockup data or backend data.

If you're following my code, I created a button component to use for the Prev and Next buttons, here is it:

// components/Button.tsx

interface iButton {
    CTA: string
    onClick: () => void
    disabled: boolean
}


export const Button = ({CTA, onClick, disabled}: iButton) => {
    return (
        <button disabled={disabled} onClick={onClick} className={`bg-blue-700 rounded-[32px] shadow-md hover:bg-blue-500 text-white font-bold py-2 px-5 ${disabled && "pointer-events-none bg-slate-300"}  `}>
            {CTA}
        </button>
    )
}

Now, we need to plug these buttons into the logic.

For mockup data flow:

I assume you have displayed your mockup data already using the useState and useEffect hooks. For instance:

// must have imported the user data

  const [userData, setUserData] = useState([])

  useEffect(() => {
   setUserData(mockData)
  }, [])

return (
<>
 <div>
  {userData.map(({title… }) => {
    return <Card title={title} …. />
 }
</div>

</>
)

If that's what you've done, we just need to update the logic with our paginatedData hook. Remember that we must provide the mockData and the numbers of data we want to display at once.

The updated code will be:


const [userData, setUserData] = useState([])

  useEffect(() => {
   setUserData(mockData)
  }, [])


// the hook

const {nextPage, prevPage, paginatedData, currentPage} = useMockPaginate(userData, 12)

// ….

// you map and display the paginatedData destructure from useMockPaginate Hook to the.

return (
<>
 <div>
  {paginatedData.map(({title… }) => {
    return <Card title={title} …. />
 }
</div>

{* the buttons *}

 <div className="flex flex-row justify-end items-center gap-12 mt-12">
        <Button CTA="Previous" onClick={prevPage} disabled={currentPage === 1 && true} />
        <Button CTA="Next" onClick={nextPage} disabled={false} />
      </div>


</>
)

That's all, if we test our application, it's working as expected. If you're following my previous code, you can still see the full and updated code here.

for the backend API data flow

If you're using an API, don't use the useMockPaginate hook as it won't work, use the useDataPaginate hook instead.

Remember that we must provide our API endpoint to the hook.

Before you use the Hook, ensure you understand the API structure, i.e., how the API queries are structured to take the currentPage and data limit.

For instance, for the posts API I recommended above, the full API URL with pagination is: https://jsonplaceholder.typicode.com/posts?_page=${currentPage}&_limit={limitData}

NB: Note that I have programming to insert the paginating queries in the useDataPaginate hook, what you need to provide when using the hook is the actual API endpoint (https://jsonplaceholder.typicode.com/posts) and how many users you want to return.

What we only need to do is to pass and update the values of currentPage and limitData as the heavy work has been done at the backend.

Now let's use our hook to update those parameters.

Assuming you already have a page where you want to display and paginate the data, the code will look something like:

// import the useDataPaginate hook


const App = () => {

//Define the limit of data to fetch

const dataLimit = 10; // number of data you want to show on a page


// destructure functions from the hook 

const API_URL = `https://jsonplaceholder.typicode.com/posts`

const {nextPage, prevPage, data, currentPage} = UseDataPaginate(API_URL, dataLimit)


// map the destructure `data` 
  return (
<>
 <div>
  {data.map(({title… }) => {
    return <Card title={title} …. />
 }
</div>

{* the buttons *}

<div className="flex flex-row items-center justify-between">

 <button onClick={prevPage}>Previous</button>
 <button onClick={nextPage}>Next</button>

</div>

</>

)
}

export default App

And you're good to go. If you're following my code, here is the demo:

The full code can be found in this repository.

Summary:

In this article, we have learned how to create a custom Hook. A custom hook in the simplest terms is simply a reusable function in React that lets you use logic over over over again and we have leveraged that to handle Data pagination in our React (Nextjs) application.

Whether you're using mockup data or fetching data from an API, those two hooks cover you.

But remember to always use the backend pagination flow as it is the most efficient.

Now that we are done with searching and pagination, what happens when you click on a profile or data card? Nothing.

But it should navigate us to a dedicated page about that particular user or data to learn more about.

In my next article, I will be talking about dynamic routing. Stay tuned.

Open to Work

I am actively open for a remote frontend developer and Technical writer role. Kindly contact me if you are hiring

DEV Community: Stephen Gbolagade

How to Add "Last Used" Badge to Next.js Login Page

Step 1: Setting Up the Login Component

Step 2: Creating the "Last Used" Badge Component

Step 3: Tracking Authentication Methods

Step 4: Handling OAuth Redirect Flows

From Solo to Shipped: How I built a functional product as a frontend engineer

Key lessons that might help other solo founders:

Contact 👇

Stop Using Local State for Filters — Here is why

— State persistency for Better UX

— Sharable link with filters

— SEO Benefits 🔍

— Easy & Fast Browser Navigation ⚡

TypeScript Best Practices — Using Index Signature

TypeScript Best Practices — Using Enums

Here is a scenario:

Solution:

Code snippets

TypeScript Best Practices — Part 1

Do you know you can do this in TypeScript to make your code cleaner? interface Author { id: string name: string posts: { title: string slug: string }[] } type AuthorPosts = Author["posts"] OR type AuthorPosts = Pick

PWA: Build Installable Next.js App that Works Offline

But What is PWA?

Benefits of Progressive Web App (PWA)

Here is what I will be using in this tutorial:

serwist / serwist

A Swiss Army knife for service workers.

A Swiss Army knife for service workers.

Documentation

Original works

How to Convert Nextjs Website to a Progressive Web App

Step 1: Build a Next.js app

Step 2: Install Serwist packages for PWA

Step 3: Configure your website's Manifest

Step 4: Register your manifest.json file in your app

Step 5: Set up the Service worker files

Step 6: Reconfigure your Next.config.js file

Final step: Build and test your app

Unable to install next-pwa or serwist packages

Done everything correctly but PWA is not working

How to Handle Dynamic Routing in Next.js

How Does Dynamic Routing Work?

Routing in Nextjs

This is what we want to do

How to Handle Dynamic Routing in Nextjs

The root directory method:

Build OTP Input Field in React — No Package Needed

Step 0: Bootstrap a React.js App

Step 1: Create the OTP Component

Step 2

What's happening:

Build Tags Input Field in React.js — No package Required!

Here is what we want to do:

Step 0: Bootstrap a React Project

Step 1: Create the useTag hook

Data Pagination in Next.js with Custom Hooks

But where is the best place to handle data pagination?

Simulating Backend Data Pagination

Step 1: Bootstrap a new Next.js app

Step 2: Creating the Pagination Hook

Step 3: Update your data component with the Hook

For mockup data flow:

for the backend API data flow

Summary:

Open to Work

Step 6: Reconfigure your `Next.config.js` file