Full Stack Developer, Tech Geek, Audiophile, Cinephile, and Lifelong Learner!

Let’s Explore The Improved Routing, Layouts & Rendering in NextJs 13

L

Next.js 13 was recently released at the Next.js conference. Many new features are included, including new routing, a new way to fetch data (React suspense), Vercel fonts, og image generation, layouts, and more.

These new features have the potential to be game changers, and they promise to be extremely fast. But not without consequences.

Let’s go into more detail about them.

Turbopack: The successor to Webpack.

Turbopack, the brand new build tool led by the creator of Webpack, Tobias Koppers, will be the Web’s next-generation bundler. Rust was used to construct it from the ground up. It incorporates turbo repo in order to cache duplicate operations. Turbopack is extremely fast.

It updates large applications 10x faster than Vite and 700x faster than Webpack. On larger applications, the difference is even greater — Vite is frequently 20x faster. It has built-in support for Server Components, TypeScript, JSX, CSS, and other technologies.

However, it is currently in alpha, which may make migration difficult for existing apps due to webpack’s vast ecosystem of plugins.

A New Nested Routing System

Next.js 13 includes a new file-system-based router built on React Server Components, which supports layouts, nested routing, loading states, error handling, and other features. This opens up new possibilities and improves the framework’s overall performance.

The /app directory (currently beta – at the time of writing) includes support for the following:

The /app directory can coexist with your existing pages directory for incremental adoption.

The new app directory retains file system-based routing, but it is now entirely directory-based, with a variety of naming conventions for different use cases. To make a page, you give the route’s direct name. js file to it, which exports the component you want to display there in a nice and simple way.

However, because it is a directory, we can co-locate additional components here rather than creating a separate components directory or following some other convention.

Faster Data Fetching

Another powerful feature introduced by app/ directory is data fetching, a powerful new way to fetch data built on top of React Suspense for Data Fetching.

It’s a big deal because we can now completely avoid things like getStaticProps and getServerSideProps by simply writing a plain JavaScript function that uses Fetch and then directly await the result of that function. By default, all of these components are react server components. In react, server components are a low-level primitive that enables server-side rendering.

// app/page.js
import { use } from 'react';

async function getData() {
  const res = await fetch('...');
  const name: string = await res.json();
  return name;
}

export default function Page() {
  // This value is fully typed
  // The return value is *not* serialized
  // so you can return Date, Map, Set, etc.
  const name = use(getData());

  return '...';
}

Data can now be fetched, cached, and revalidated at the component level in a single flexible approach. This means that all of the benefits of Static Site Generation (SSG), Server-Side Rendering (SSR), and Incremental Static Regeneration (ISR) are now available by extending the Web fetch API and using React’s use hook:

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });

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

// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

Data can be retrieved from layouts, pages, and components in the app/ directory, with support for streaming server responses.

Overall, this is a fantastic framework with a lot of potential for the future. However, it has a long way to go before it is ready for production. Here’s a link to the documentation for Next.js 13.

Add Comment

  |     |  
Full Stack Developer, Tech Geek, Audiophile, Cinephile, and Lifelong Learner!