Thread by @nextjs

1/ Update on the new Next.js router, with support for nested layouts and React Server Components.

This is the biggest update to Next.js since it was released and incorporates many features from React 18.

We made a quick demo to show some of the features.

2/ This new router stands on the shoulders of React 18:

◆ Pages and Layouts are Server Components by default, sending less code to the client
◆ Interfaces are non-blocking and can be interrupted if higher priority work happens like transitions

3/ Layouts can be nested and shared across routes. On navigation, layouts do not re-render, meaning they preserve state and remain interactive.

This enables developers to more easily build complex application layouts and more ergonomically handle success/error/loading states.

4/ Optimistic loading states using server routing.

When loading UI is provided, navigation is instant and can be shown immediately while a request is made to the server. Otherwise, transitions will suspend with `startTransition`.

Pages remain interactive during transitions.

5/ On navigation, the “payload” for Server Components is stored in the client-side cache.

◆ Soft pushes don’t refetch from the server, making navigation instant
◆ Hard pushes invalidate the “slice” of data from the server, allowing you to get fresh data

6/ We're actively working on implementing the new router.

For more information, check out the original RFC.

nextjs.org/blog/layouts-r…