Summary

This RFC describes the new Next.js app directory and a layout-first routing model to enable nested, stateful layouts and improved routing. Key changes include a new app/ directory (coexisting with pages/), file conventions (layout.js, page.js, loading.js), Server Components by default in app/, data fetching in layouts to avoid waterfalls, and advanced routing patterns (route groups, parallel and intercepting routes). The new router leverages React 18 features (Streaming, Suspense, Transitions) and is 100% incrementally adoptable with no breaking changes.

Key Points

• app/ directory: opt-in alongside pages/ so you can migrate incrementally.
• File conventions: layout.js for shared UI, page.js for route-specific UI, loading.js for loading states.
• Root vs regular layouts: app/layout.js becomes the global root layout (replaces _app/_document); per-folder layout.js scopes layouts to subtrees.
• Nested layouts: layouts preserve React state across sibling navigations and compose naturally in a layout tree.
• React Server Components: files in app/ are rendered as Server Components by default; use .server.js and .client.js file suffixes to opt explicit types; plain .js files are shared.
• Data fetching: you can fetch data inside layouts to avoid waterfalls and enable subtree-level loading and streaming.
• Routing features: server-centric routing with SPA-like behavior, route groups, parallel routes, intercepting routes, and templates for advanced patterns.
• Platform: router built on React 18 primitives (Streaming, Suspense, Transitions) to power streaming, instant loading states, and improved error handling.
• Adoption: designed to be 100% incrementally adoptable with no breaking changes; feedback requested via GitHub Discussions.