Next.js 13

https://nextjs.org/

Vercel, the company behind the popular React framework Next.js, released the latest version of the framework on October 25th, 2022. This new version, Next.js 13, includes updates and improvements to features such as layout, data fetching, and routing, as well as a faster bundler. These changes are intended to make it easier for developers to create fast, scalable, and reliable web applications using React.

One new feature in Next.js 13 is the introduction of route segments, which allows developers to create nested routes by placing pages within folders within the app directory. When creating routes within these folders, developers can use page.jsx instead of index.jsx.

In the previous versions of Next.js, developers were required to create a layout folder in order to share UI between multiple pages. However, with the release of Next.js 13, this is no longer necessary as the layout is now included by default when creating a new project. The layout in Next.js 13 is interactive and does not need to be re-rendered, making it easier for developers to work with.

In addition to the inclusion of the default layout, Next.js 13 also introduces simplifications to the API for fetching data. The old APIs getServerSideProps, getStaticProps, and getInitialProps are no longer supported and have been replaced with a new API that is designed to be easier to use.

Similar to ‘getServerSideProps’

When the send request using getServerSideProps., should be cached ‘no-store’.

fetch(URL, { cache: 'no-store' });

Similar to ‘getStaticProps’

When the send request using getServerSideProps, should be cached ‘force-cache’.

fetch(URL, { cache: 'force-cache' });

Similar to ‘getStaticProps with the revalidate option’

When cached with a lifetime of seconds

fetch(URL, { next: { revalidate: 30 } });

Turbopack(Alpha)

Turbopack is a faster bundler compared to Webpack, Vite. Also, Turbopack uses clever caching techniques to improve the handling of source changes in an optimized manner. Turbopack holds a model of the changes that were already built and only builds those based on ongoing changes. You can try out Turbopack if you run ‘next dev — — turbo’.

Turbopack results in:

700x faster updates than Webpack

10x faster updates than Vite

4x faster cold starts than Webpack

https://nextjs.org/blog/next-13

‘use client’

Components can automatically be rendered as server component and if we want to use ‘useState’ and ‘useEffect’ client hooks, it is necessary to write ‘use client ’ at the beginning of the file.

'use client';

import { useState } from 'react';

export default function Navbar() {
  const [title, setTitle] = useState('React');

  return (
    <div>
      <p>{title}</p>
    </div>
  );
}

next/link

In previous versions of Next.js, the <a> had to be nested within <Link> in order to properly render a link. However, with the release of Next.js 13,<Link> now always renders <a> by default.

import Link from 'next/link'

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

// Next.js 13
<Link href="/checkout">
  About
</Link>

next/image

In the previous versions of Next.js, it was required to specify the ‘alt’ attribute for the image in order to avoid an error. However, with the release of Next.js 13, you no longer need to the ‘alt’ attribute.

import Image from 'next/image';
import logo from './logo.png';

function Navbar() {
  return <Image alt="logo" src={logo} />;
}

@next/font

According to Next.js 13 new font system, you can optimize your custom fonts and also use Google fonts without any request from the browser. The only thing you need to do is install the @next/font package. You can use it like this:

import { Inter } from '@next/font/google';

const inter = Inter();

Resources:

Next.js 13

Next.js 13: Working with the new app directory - LogRocket Blog

Thank You, See you in the next article !!

You can reach out to me here,

LinkedIn: https://www.linkedin.com/in/cerensolpan/

GitHub: https://github.com/cerensolpan

Twitter: https://twitter.com/cerensolpanture