Adding reading time stat in your Next.js blog

I recently started my journey to improve my frontend/javascript skills. So the obvious way is by adding a bunch of new features into my blog.

The latest thing I added is this little info on how long the article will take you to read. This is on pretty much every blogging platform and I always wanted it.

The theory behind this number is that people on average read around 225 words per minute. So we need to count the words in the article and divide it by 225.

So the basic code for this would be something like this:

const wordsPerMinute = 225

export function readingTime(text) {
    return Math.ceil(wordCounter(text) / wordsPerMinute)
}

Now we need to count the words. I started by naively splitting by white space and counting. I was not happy with this result as I have a lot of code in my articles and it counted a lot of syntax as words.

So I decided to split by whitespace and check if each token is a word. This is done by checking if it contains some alphanumeric token.

My implementation:

function wordCounter(input) {
    const text = input.split(/\s+/)
    let wordCount = 0
    for (let i = 0; i < text.length; i++) {
        if (text[i] !== ' ' && isWord(text[i])) {
            wordCount++
        }
    }
    return wordCount
}

function isWord(str) {
    let alphaNumericFound = false
    for (let i = 0; i < str.length; i++) {
        const code = str.charCodeAt(i)
        if ((code > 47 && code < 58) || // numeric (0-9)
            (code > 64 && code < 91) || // upper alpha (A-Z)
            (code > 96 && code < 123)) { // lower alpha (a-z)
            alphaNumericFound = true
            return alphaNumericFound
        }
    }
    return alphaNumericFound
}

I am very happy with my results. I crosspost most of my articles on Medium and my result times are pretty much the same as their results. In some cases, I have a minute difference but I can live with that.

If you like this article you can follow me on Twitter.