next 13

Next.js 13 introduced several key features and improvements, including:

1. New app Directory (Beta): This new feature improves routing and layouts in Next.js and aligns with the future of React. The app directory includes support for:

   • Layouts: This feature makes it easy to maintain state across navigations, avoid expensive re-renders, and enable advanced routing patterns. Layouts share UI between multiple pages and preserve state on navigation, remaining interactive without re-rendering.
   • Server Components: Introduced with the app directory, Server Components allow building of fast, highly-interactive apps with a single programming model, reducing the amount of JavaScript sent to the client and enabling faster initial page loads.
   • Streaming: This feature allows for the progressive rendering and incremental streaming of rendered units of the UI to the client. It allows parts of the page that do not specifically require data to render instantly, showing a loading state for parts of the page that are fetching data.
   • Data Fetching: The native fetch Web API has been extended in React and Next.js, enabling fetching, caching, and revalidating data at the component level. It brings all the benefits of Static Site Generation (SSG), Server-Side Rendering (SSR), and Incremental Static Regeneration (ISR) through one API.

2. Turbopack (Alpha): Next.js 13 includes Turbopack, a new Rust-based successor to Webpack. Turbopack is designed to leverage the speed of Rust and the parallelism of modern hardware to dramatically speed up the build process. It promises faster build times, improved caching, and an overall improved development experience.

Other enhancements include a new next/image with faster native browser lazy loading, @next/font for automatic self-hosted fonts with zero layout shift, and an improved next/link with a simplified API and automatic <a>.

However, it's important to note that as of the release, the app directory was in beta, and it was not recommended for production use yet. The pages directory continues to be supported for the foreseeable future.

Please note that some of the details about Turbopack were not fully extracted due to some limitations in the browsing tool. For a more comprehensive overview of Turbopack, I would recommend visiting the official Next.js blog or documentation.