Next.js 13 — Features, Changes and Improvements

Next.js 13

Be amazed — Next.js 13 takes optimization to a very good level.

We at Naukri Engineering, use technologies that enable us to create efficient, scalable, and time-efficient tech products. As a result, we are constantly attempting to put cutting-edge industry updates to the test.

We recently moved to production with Next.js 13; the overall process was very smooth and easy, and we have seen an improvement in overall performance as well.

So, in this blog post, I’ll walk you through what’s new in Next.js 13 and how it can affect your development process based on our experience and knowledge.

I’ll also go over some of the changes made to the Next.js version 13 as well.

Introducing Next.js

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

Next.js v13 was released by Vercel at the Next.js conference on October 26 2022 packed with tons of new features.

Overall, the goal is to make the development process faster, easier, and more performant by improving code splitting, caching, and resource loading.

This means that your Next.js application will load and run faster, providing a better user experience..

Let’s talk about some of them in detail.

Features — So what’s new in Next.js 13 ?

New App Directory (beta) & Router
— Easier, Faster, Less client JS

Next.js 13 introduced the new App Router built on top of React Server Components with support for layouts, nested routing, loading states, error handling, and more.

I must say that using these features was a breeze and a pleasure to use.

Next.js 13 now gives you the ability to control component states very easily and at a very granular level.

Component hierarchy within folder

Image from next.js 13 docs. https://beta.nextjs.org/docs/routing/fundamentals#component-hierarchy

Simplified Data Fetching
— new data fetching system is built on top of the native fetch()

We used to use special functions like getServerSideProps for real-time data and getStaticProps for cached data before Next.js 13.

Next.js 13 has removed these functions and replaced them with the fetching formats listed below:-

Fetch with Cached Data

//This request would be cached until manually invalidated. 
//Similar to 'getStaticProps'
fetch(API_URL, { cache: 'force-cache' })

//Note :- Use this type of fetching for data that does not change often.

With cache data, Next.js will only do the actual HTTP request once, at the build time. The next time we are loading the page Next.js will reply with the initial data and will not do again the request.

Fetch with Dynamic Data

When we want to run a new request for each page load we can use the no-store value for the cache parameter.

// This request should be refetched on every request.
// Similar to 'getServerSideProps'
fetch(API_URL, { cache: 'no-store' })

//Note :- Use this for data that needs to be updated at each page load.

Fetch with Revalidating Data

We can achieve a mix between Dynamic Data and Cached Data if we use the revalidate flag:

// This request should be cached with a lifetime of 10 seconds.
// Similar to 'getStaticProps' with the 'revalidate' option.
fetch(API_URL, { next: { revalidate: 10 } });
//Use this for the case when we have data that changes, but now very often.

Fetching Methods in Next.js 13

New Rendering Strategies
— Introducing Server and Client Components
— JS bundle is a bit smaller
— Rehydration process is quicker (fewer components to render on the client).

Each component decides whether or not to be a “server component”, or to stick with being a server and client component.

Sharing this Next Docs sketch which shows that combining server components and client components throughout the app is no problem:

Next.js Server and Client Components

To be clear, React Sever Component ( or RSC ) is a nice boost. We want our bundles to be as small as possible, and we want rehydration to happen as quickly as possible.

Toolkit Updates

Next.js 13 Toolkit Updates

Improved Next Link
@next/link — simplified API without <a> inside

Benefits

Now in Next.js 13, you need not to wrap link with <a> element.

Usage

import Link from 'next/link'

// Next.js 12 
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13 - Easier, a time saver, and a clean code

import Link from 'next/link'

<Link href="/about">
  About 
</Link>

Image Optimization

@next/image: Faster with native browser lazy loading.

Next.js 13 also features enhanced image optimization. This means that images will load faster, even on slow connections.

Font Optimization
@next/font — Automatic self-hosted fonts with zero layout shift.

Benefits

• Does not send extra external network requests to google fonts.
• Does not face a layout shift error in nextjs which is more important for SEO
• There is no need to download the google fonts locally and no need for CDN links

Note

The @next/font package only works with Google Fonts. It does not work with other font providers. If you use any other font, you can download it locally and config with the @next/font package.

Awesome.

Changes — So what’s changed in Next.js 13 over earlier version ?

• Typescript by Default
  Next.js provides a TypeScript-first development experience for building your React application.
• Server Components by Default
  In Next.js 13, all components inside the app directory are React Server Components by default allowing developers to better leverage server infrastructure.

Other Improvements — So what’s improved in Next.js 13 ?

Hooks only for Client components

• useRouter hook for programmatic redirects.
• useSearchParams hook for reading URL Search Parameters.
• useSelectedLayoutSegment hook for getting the current route segment.
• useSelectedLayoutSegments hook for getting all the child pages in the current layout segment.
• usePathname hook to read the current path name.

Special Functions for the Server Components

• cookies: Function to read cookies on the server side.
• fetch : Function to make requests on the server, it’s an extension of web fetch API.
• headers : Function to read HTTP headers on the server.
• notFound : Function to dynamically return 404 from the server.
• redirect : Function to redirect from the server.

Conclusion

Apart from the aforementioned features and improvements, Next.js 13 offers other features as well through the app router ; see the full documentation for a complete list.

It has the potential to be a complete Game Changer for you !!

Links

• Beta Documentation
• App Playground
• Upgrade Guide

Thank you for taking the time to read this, and I hope you learned as much as I did! ❤❤

To learn more about engineering at Naukri, check out the rest of our Engineering Blog

You can follow me on Twitter and Linkedin, or right here on Medium