Next.js 13 is here

It's impact and drawbacks for both orgs and developers.

Next.js 13 is here

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
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
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:

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:

Social card for SEO

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)

Custom generated profile card

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.


Explore More Insights

Comprehensive Fintech Audit Unveiled: Mastering Complex Tech Stacks for Strategic Excellence

Comprehensive Fintech Audit Unveiled: Mastering Complex Tech Stacks for Strategic Excellence

Read More
Digitally Transforming Legacy and Startup Fintechs: A Journey Towards Innovation

Digitally Transforming Legacy and Startup Fintechs: A Journey Towards Innovation

Read More
Empowering Supply Chain Businesses with Advanced AI: A Look at Our Image Matching Technology

Empowering Supply Chain Businesses with Advanced AI: A Look at Our Image Matching Technology

Read More
The Future of Website Optimization for Large Language Models

The Future of Website Optimization for Large Language Models

Read More
Pioneering a New Era in Startup Investing: Streamlining Connections between Entrepreneurs and Investors

Pioneering a New Era in Startup Investing: Streamlining Connections between Entrepreneurs and Investors

Read More
Revitalizing Retail: How Strategic Tech Enhancements Supercharged a Startup's Delivery Service

Revitalizing Retail: How Strategic Tech Enhancements Supercharged a Startup's Delivery Service

Read More
Revolutionizing Logistics: How Microsoft Dynamics 365 Boosts Supply Chain Efficiency

Revolutionizing Logistics: How Microsoft Dynamics 365 Boosts Supply Chain Efficiency

Read More
Revolutionizing Business Intelligence: A Deep Dive into AI-Driven Strategic Solutions

Revolutionizing Business Intelligence: A Deep Dive into AI-Driven Strategic Solutions

Read More
Scaling Success: How We Elevated a D2C Apparel Brand's Digital Storefront and Operations

Scaling Success: How We Elevated a D2C Apparel Brand's Digital Storefront and Operations

Read More
Transforming Chemical Formulations: A Case Study of Innovation in Contract Manufacturing

Transforming Chemical Formulations: A Case Study of Innovation in Contract Manufacturing

Read More
Artificial Intelligence For Freight Carriers

Artificial Intelligence For Freight Carriers

Read More
Artificial Intelligence is smart (as a 7year old)

Artificial Intelligence is smart (as a 7year old)

Read More
Beyond CRM and ERP.

Beyond CRM and ERP.

Read More
CBDC and the Future of Blockchain in India

CBDC and the Future of Blockchain in India

Read More
Chiplet Manufacturing in India: Current State and Outlook

Chiplet Manufacturing in India: Current State and Outlook

Read More
Cloud Price Comparison

Cloud Price Comparison

Read More
Common Human Factors That Inform Design

Common Human Factors That Inform Design

Read More
Consumer Trends in 2025: The Era of Smart, Sustainable, and Digitally-Driven Choices

Consumer Trends in 2025: The Era of Smart, Sustainable, and Digitally-Driven Choices

Read More
3 Cybersecurity Breaches That Cost Indian Startups ₹50+ Crore in 2024

3 Cybersecurity Breaches That Cost Indian Startups ₹50+ Crore in 2024

Read More
Decentralized Oracle

Decentralized Oracle

Read More
The Digital Leap: How Business Outpaced Competitors

The Digital Leap: How Business Outpaced Competitors

Read More
Digital Solutions for Stock Brokers.

Digital Solutions for Stock Brokers.

Read More
How Artificial Intelligence Helps Automobile Dealerships.

How Artificial Intelligence Helps Automobile Dealerships.

Read More
How Digitisation Helps Formulation Companies.

How Digitisation Helps Formulation Companies.

Read More
How metaverse will impact our lives and businesses

How metaverse will impact our lives and businesses

Read More
How Web 3.0 Will Change Businesses.

How Web 3.0 Will Change Businesses.

Read More
Industrial Digital Twins

Industrial Digital Twins

Read More
The Top Technology Trends of 2025 That Are Reshaping Our World

The Top Technology Trends of 2025 That Are Reshaping Our World

Read More
New Problems (& Solutions) of Identity Verification.

New Problems (& Solutions) of Identity Verification.

Read More
Psychology in Design

Psychology in Design

Read More
Reinforcement learning for custom trading algorithms.

Reinforcement learning for custom trading algorithms.

Read More
Tech Without Tech Teams: Outsourcing vs. In-House Development

Tech Without Tech Teams: Outsourcing vs. In-House Development

Read More
Technology In Agriculture

Technology In Agriculture

Read More
The Beauty & The Beast

The Beauty & The Beast

Read More
The Cost of Inaction: Why Delaying Tech Investment Is Risky

The Cost of Inaction: Why Delaying Tech Investment Is Risky

Read More
The Future of Virtual Reality

The Future of Virtual Reality

Read More
The Power of Boring

The Power of Boring

Read More
The Search For Value

The Search For Value

Read More
Pioneering Industry Trends in India for 2025: A Tech-Driven Revolution

Pioneering Industry Trends in India for 2025: A Tech-Driven Revolution

Read More
Unleashing Agentic AI: Transforming Supply Chain, Fintech and Pharma

Unleashing Agentic AI: Transforming Supply Chain, Fintech and Pharma

Read More
When Less Is More

When Less Is More

Read More

Ready to Transform Your Business?

Join industry leaders already scaling with our custom software solutions. Let’s build the tools your business needs to grow faster and stay ahead.