Understand NanoID and Its Usage

When it comes to JavaScript, generating either UUID or NanoID is pretty straightforward. They both have NPM packages to help you with it.

All you need to do is install the NanoID NPM library using npm i nanoid command and use it in your project.

import { nanoid } from 'nanoid';
model.id = nanoid();

Do you know that NanoID has over 11,754K weekly NPM downloads and 60% faster than UUID?

Besides, NanoID is almost 7 years younger than UUID, and it already has more GitHub stars than UUID.

The below graph shows the npm trends comparison between these 2, and we can see an upward trend of NanoID compared to the flat progress of UUID.

I hope these numbers have already convinced you to try out NanoID.

However, the main difference between these two is simple. It boils down to the alphabet used by the key.

Since NanoID uses a larger alphabet than UUID, a shorter ID can serve the same purpose as a longer UUID.

1. NanoID is Only 108 bytes in Size

Unlike UUID, NanoID is 4.5 times smaller in size and does not have any dependencies. Furthermore, the size limit has been used to reduce the size from another 35%.

The size reduction directly affects on size of the data. For instance, an object using NanoID is small and compact for data transfer and storage. With the application growth, these numbers become visible.

2. More Secure

In most of the random generators, they use unsafe Math.random(). But, NanoID uses crypto moduleand Web Crypto API which is more secure.

Also, NanoID has used its own algorithm called a uniform algorithm during the implementation of the ID generator instead of using a random % alphabet

3. It is Fast and Compact

NanoID is 60% faster than the UUID. Instead of having 36 characters in UUID’s alphabet, NanoID only has 21 characters.

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz-

Also, NanoID support 14 different programming languages, which are,

C#, C++, Clojure and ClojureScript, Crystal, Dart & Flutter, Deno, Go, Elixir, Haskell, Janet, Java, Nim, Perl, PHP, Python with dictionaries, Ruby , Rust, Swift

4. Compatibility

It also supports PouchDB, CouchDB WebWorkers, Rollup, and libraries like React and Reach-Native.

You can get a unique ID in the terminal by using npx nanoid. The only prerequisite is to have NodeJS installed.

Besides, you can also find NanoID inside the Redux toolkit and use it for other use cases as follows;

import { nanoid } from ‘@reduxjs/toolkit’
console.log(nanoid()) //‘dgPXxUz_6fWIQBD8XmiSy’

5. Custom Alphabets

Another existing feature of NanoID is that it allows developers to use custom alphabets. You can change the literals or the size of the id as below:

import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('ABCDEF1234567890', 12);
model.id = nanoid();

In the above example, I have defined a custom Alphabet as ABCDEF1234567890 and the size of the Id as 12.

6. No Third-Party Dependencies

Since NanoID doesn’t depend on any third-party dependencies, over time, it becomes more stable self-governed.

This is beneficial to optimize the bundle size in the long run and make it less prone to the issues that come along with dependencies.