With the new version of NextJS, the Vercel team introduced us to a new App directory. With an improvement in routing, layout, and performance.

App Layout includes support for:

• Layouts
• Server Components
• Streaming
• Support For data Fetching

In this post, we’ll go to see each new feature and see how’s works. let's start!

Layouts

With the app/ directory it's more easy to lay out complex interfaces. Works very similarly to the pages/ directory. On the app/ directory we’ll put all our pages. We can create nesting layouts, create our components, styles, and routes, and even add testing inside our pages folder.

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

With Layouts we have new’s components like Head, Layout, Template, errors, loading,, and more. Stay tuned to the blog to see our next post where we go deep into this new’s components ;).

Create a page its equal to the previous version:

// app/page.js
// This file maps to the index route (/)
export default function Page() {
  return <h1>Hello, I'm Sebastian!</h1>;
}

Server Components

With server components, we can build fast, highly-interactive apps with a single programing model.

With server components, we can access server features (Like file system), and in the same way, we loss client features (like react references). By default all our components and pages will be server components, this will help us to reduce the amount of javascript that we send to the browser and create a better catching experience.

To declare a client component we need to add at the first line in our component 'use client' :

"use client";
import { useRef } from "react";

export default function Page() {
  const textInput = useRef(null); // WE CAN'T USE useRef on server Components
  return <h1>Welcome to my client component, we can use React.ref here!</h1>;
}

Stay tuned to my blog, we’ll go deep into the servers components soon ;)

Streaming

With streaming, we can progressively render and incrementally stream rendered units of the UI to the client.

To use Streaming we need to set Server Components and use nested layouts. With Streaming we can show a loading state for parts of the page where we are fetching data. With Streaming the user does not have to wait for the entire page to load before they can start interacting with it.

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

Streaming guide on NextJS coming soon!

Data Fetching

Say goodbye to getStaticProps()! With the recent React support of Promises RFC introduces a powerful new way to fetch data and handle promises inside our components.

import supabase from "supabase-js";

export default async function Users() {
  const users = await supabase.from("users").select();

  return <main>{users}</main>;
}

Note that we don’t t are using useEffect(() => {}, []) or getStaticProps()

This means that all the benefits of Static Site Generation (SSG), server-Side Rendering (SSR), and incremental Static Regeneration (ISR) are now available.

---

NextJS 13 introduces to us a very variety of features, on the next post we’ll go deeply into each of them and see how we can implement them.

Thanks for reading ;)