Next.js 13 is here

Devesh Anand Srivastava — Sun, 06 Nov 2022 18:03:23 +0000

Next.js 13 was announced recently at Next conf with plethora of new (and evolved) features that will make the process of writing and maintaining frontend code for software companies (and devs) like ours (itmtb.com) easier by improving quality, efficiency and readability of code.

Some of those features:

Server-side components by default:

Remember using getStaticProps, getStaticPaths and getServerSideProps? Well, they'll be obsolete in Next 13. Now is this a good step? In most cases, yes. Take the simple code below for example:

Server side prop in Next <=12 vs Next 13

Apart from making the code more readable, server-side components bring in other advantages, like reducing client-side JavaScript bundle.

In large production apps with a lot of dependencies, it becomes a painful challenge for developers to reduce the bundle size, that too without compromising on functionalities. With server-side components, a major portion of dependencies never reach client-side, reducing the bundle size drastically.

Client-side components still have their purpose though, and any component can be made client side by simply adding 'use client' as the very first line. Whenever you need to re-render, or use useEffect you can easily make the component client-side.

Client-side component in Next 13

An awesome layout system:

Next.js 13 introduces a new layout system at route level.

For example, we can now have custom layout for all pages in /blog route. Just put the layout in layput.{js/jsx/ts/tsx} under blog folder in pages (or app in Next.13) directory.

You can even have custom error component, or loading component based on routes. This definitely makes the developer experience way better and easier. Layouts even preserve state and don't re-render.

A deeper explanation of layout in Next 13:

Turbopack:

Let's be honest, webpack has been an essential part of the web, but with time it has shown it's drawbacks. It has it's fair share of non-fixable issues and it has hit the cap for performance for a bundler written in JavaScript.

Turbopack, a bundler written in Rust claims to solve the issue. As per Vercel's claims, it does:

700x faster updates than Webpack
10x faster updates than Vite
4x faster cold starts than Webpack

The benchmarks are a topic of debate themselves, like the ones claiming Turbopack being 10x faster than Vite:

// Detect dark theme var iframe = document.getElementById('tweet-1586317587348017152-272'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1586317587348017152&theme=dark" }

Nonetheless, it is faster than Vite (way faster than webpack) and shows a lot of promise.

Image and Font:

Next.js 13 has a better next/image since it:

Is faster as it ships less JavaScipt to client-side and doesn't need hydration.
Requires alt tag by default for better accessibility.
Easier to style.

Next.js 13 also introduces a font-system through which you can use any Google font, without sending request to Google from browser. Fonts are downloaded at build time and self-hosted in your project. This improves both privacy and performance.

SEO:

When sharing a blog-post or a page of website, you would've noticed a card like the one below:

This card is produced using <meta> tags in <head> section of page. The image is produced using

<meta property="og:image" content="img_url/path" />

. Vercel has created a new library, @vercel/og, that works with Next.js 13 to create dynamic social cards.

You can explicitly create profile cards using @vercel/og like this:

import { ImageResponse } from '@vercel/og';
export const config = {
  runtime: 'experimental-edge',
};
export default async function handler() {
  return ImageResponse(
    (
      <div
        style={{
          backgroundColor: '#fff',
          backgroundImage: 'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
          backgroundSize: '100px 100px',
          height: '100%',
          width: '100%',
          textAlign: 'center',
          alignContent: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          display: 'flex',
        }}
      >
        <img
          alt="Vercel"
          width={255}
          height={225} 
src= "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE2IiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTU3LjUgMEwxMTUgMTAwSDBMNTcuNSAweiIgLz48L3N2Zz4="
          style={{ margin: '0 75px' }}
        />
        <div
          style={{
            fontSize: 60,
            marginTop: 30,
            lineHeight: 1.8,
          }}
        >
          Vercel Edge Network
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}

The above code provides us with the card below for this url.
(Full code for the Next project)

Backend updates:

Next.js being a full-stack framework, has brought some backend changes as well:

Middlewares
You can now use middleware to handle rewrite and redirect

Final thoughts:

Some of the features (like next/font) are still in beta and might take some time before they're production ready. Also, migration might not be that easy, considering the major changes happening in Next.js 13.

Although Next has provided a migration guide from v12 to v13, it might still be tricky to migrate from older versions.

But for new projects, Next.js 13 seems promising. It will be better in almost all aspects, be it user-experience, developer-experience or maintenance, for both developers and companies.

How Computers generate random numbers ?

Devesh Anand Srivastava — Tue, 18 May 2021 16:16:26 +0000

We have all used .random() function in our programming journey, which returned us some random number in some specified range. Did you ever think how the random number was generated?

You'll agree that,

"A computer is a machine that can be programmed to carry out sequences of arithmetic or logical operations automatically."
- Wikipedia

Then how can a computer be programmed to generate a random number through sequence of operations? If some random number is generated through some sequence of steps (algorithm), is it truly random? This takes us to the types of random numbers there are:

True Random Numbers
Pseudo Random Numbers

1. True Random Numbers:

As the name suggests, they are truly random. Since an algorithmically generated number can't be a random number in true sense, true random numbers are generated using unpredictable data from real world, like the rpm (rotations per minute) of CPU fan, or exact time you press a key on your keyboard, or atmospheric noise around the computer. Such physical phenomenon give completely unpredictable set of entropy (randomness), making true random numbers secure.

Random number generators of this kind are called True random number generators (TRNGs). Linux uses dev/random to collect entropy from atmosphere around you, and creates true random numbers. It gathers entropy in form of environmental noise through device drivers.

2. Pseudo Random Numbers:

These are alternative to true random numbers, generated using some seed value and some algorithm. The numbers generated seem to be random, but are predictable in reality if seed value and algorithm is known.

As you might have already guessed, they are not great from security perspective. This is why using PRNGs in encryption is a bad idea. FreeBSD takes it rather seriously.

Random number generators generating these kinds of numbers are called pseudo random number generators (PRNGs). PRNGs are faster compared to TRNGs, and are useful in scenarios where security is not a concern, like games, or while learning programming.

One of the most common PRNG is linear congruential generator. Let's see how it works.

It uses recurrence:

Xn+1 = (aXn + b) mod m

Where,
X is sequence of pseudo random values
m is the modulus
a the multiplier
c the increment
X0 the seed value

Let's have an example. Taking X0 as 10,
a = 22,
c = 723,
m = 10,000

X1 = (aX0 + c) mod m
X1 = ( 22(10) + 723 )mod 10000
X1 = 943

Now to get another random number X2, put value of X1 from above,

X2 = (aX1 + c) mod m
X2 = ( 22(943) + 743 )mod 10000
X2 = 1489

This is one of the numerous ways how you can generate different (pseudo) random numbers of different sizes.

Javascript code for Linear Congruence method:

// Function to generate random numbers
function linearCongruentialMethod(Xo, m,  a, c,
                     randomNums, noOfRandomNums)
{

    // Initialize the seed state
    randomNums[0] = Xo;

    // Traverse to generate required
    // numbers of random numbers
    for(let i = 1; i < noOfRandomNums; i++)
    {

        // Follow the linear congruential method
        randomNums[i] = ((randomNums[i - 1] * a) + c) % m;
    }
}

    // Driver Code

    // Seed value
    let Xo = 5;   
    // Modulus parameter
    let m = 7;
    // Multiplier term
    let a = 3; 
    // Increment term
    let c = 3; 
    // Number of Random numbers
    // to be generated
    let noOfRandomNums = 10;

    // To store random numbers
    let randomNums = new Array(noOfRandomNums).fill(0);

    // Function Call
    linearCongruentialMethod(Xo, m, a, c,
                             randomNums,
                             noOfRandomNums);

    for(let i = 0; i < noOfRandomNums; i++)
    {
        document.write(randomNums[i] + " ");
    }

Credits: Geeksforgeeks

DEV Community: Devesh Anand Srivastava