NextJS 13, Here is what I have learned

1. use from React

Have tried React’s official use hook, which is built on top of React Suspense for Data Fetching and it’s pretty cool! The new use hook replaces previous Next.js APIs like getStaticProps and getServerSideProps and aligns with the future of React.

import { use } from 'react';

async function getTodos() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos");
  return res.json();
}

export default function Page() {
  const todos = use(getTodos());

  return (
    <div>
      {todos?.map((todo) => (
        <h1 key={todo?.id}>{todo.title}</h1>
       ))}
    </div>
  );
}

2. Layouts

Have tried Layouts, and you know what? This is a next-gen feature for NextJS and developers like me going to love it. If you check out my nextjs projects, you will see that I have used a separate layout folder, and now no need for that.

// app/page.js
// This file maps to the index route (/)
export default function Page() {
  return <h1>Hello, Next.js 13 here!</h1>;
}
// Similar to index.js page

3. New Server Components architecture

When a route is loaded, the Next.js and React runtime will be loaded, which is cacheable and predictable in size. This runtime does not increase in size as your application grows.

4. Streaming

An important feature that is used in data fetching. Let's say we want to fetch data using SSR and need to show a loading screen until the data is fetched, We can simply create a file called loading.js (will be found by nextjs on build time) and use it as a loading component. This component can be customized. Example

Source: NextJS

5. Turbo pack

The new Rust-based successor to Webpack. Turbopack only bundles the minimum assets required in development, so startup time is extremely fast. On an application with 3,000 modules, Turbopack takes 1.8 seconds to boot up. Vite takes 11.4 seconds and Webpack takes 16.5 seconds.

50% faster than before

Source: Nextjs

6. @next/image

The new Image component:

• Ships less client-side JavaScript
• Easier to style and configure
• More accessible requiring alt tags by default
• Aligns with the Web platform
• Faster because native lazy loading doesn’t require hydration

7. @next/font

Next.js 13 introduces a brand new font system that:

• Automatically optimizes your fonts, including custom fonts
• Removes external network requests for improved privacy and performance
• Built-in automatic self-hosting for any font file
• Zero layout shift automatically using the CSS size-adjust property
• Custom fonts are also supported, including support for automatic self-hosting, caching, and preloading of font files.

NOTE: In order to use @next/font npm i @next/font

8. @next/link

From now no need <a> tag as a child under the link.
<Link> always renders an <a> and allows you to forward props to the underlying tag.

GitHub repo: Next13

Deployed Website: nextjs-13-sarath