This RFC outlines the biggest update to Next.js since it was introduced in 2016:
- Nested Layouts: Build complex applications with nested routes.
- Designed for Server Components: Optimized for subtree navigation.
- Improved Data Fetching: Fetch in layouts while avoiding waterfalls.
- Using React 18 Features: Streaming, Transitions, and Suspense.
- Client and Server Routing: Server-centric routing with SPA-like behavior.
- 100% incrementally adoptable: No breaking changes so you can adapt gradually.
- Advanced Routing Conventions: Offscreen stashing, instant transitions, and more.
The new Next.js router will be built on top of the recently released React 18 features.
Terminology
This RFC introduces new routing conventions and syntax. The terminology is based on React and standard web platform terms. Throughout the RFC, you’ll see these terms linked back to their definitions below.
- Tree: A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.
- Subtree Part of the tree, starting at the root (first) and ending at the leaves (last).
Pic courtesy: nextjs.org
URL Path: Part of the URL that comes after the domain.
URL Segment: Part of the URL path is delimited by slashes.
Pic courtesy: nextjs.org
Introducing the App Folder
Pic courtesy: nextjs.org
To ensure these new improvements can be incrementally adopted and avoid breaking changes, there is a proposed new directory called app.
The app directory will work alongside the page directory. You can incrementally move parts of your application to the new app directory to take advantage of the new features. For backward compatibility, the behavior of the page directory will remain the same and continue to be supported.
Defining Routes
Pic courtesy: nextjs.org
You can use the folder hierarchy inside the app to define routes. A route is a single path of nested folders, following the hierarchy from the root folder down to a final leaf folder.
For example, you can add a new /dashboard/settings route by nesting two new folders in the app directory.
Note: With this system, you'll use folders to define routes, and files to define UI (with new file conventions such as layout.js, page.js, and in the second part of the RFC loading.js). This allows you to colocate your own project files (UI components, test files, stories, etc) inside the app directory. Currently this is only possible with the pageExtensions config.
Route Segments
Each folder in the subtree represents a route segment. Each route segment is mapped to a corresponding segment in a URL path.
Pic courtesy: nextjs.org
For example, the /dashboard/settings route is composed of 3 segments:
The / root segment
The dashboard segment
The settings segment
Note: The name route segment was chosen to match the existing terminology around URL paths.
Layouts
New file convention: layout.js
So far, the folders are used to define the routes of our application. But empty folders do not do anything by themselves.
A layout is UI that is shared between route segments in a subtree. Layouts do not affect URL paths and do not re-render (React state is preserved) when a user navigates between sibling segments.
A layout can be defined by default exporting a React component from a layout.js file. The component should accept a children prop which will be populated with the segments the layout is wrapping.
There are 2 types of layouts:
Root layout: Applies to all routes
Regular layout: Applies to specific routes
You can nest two or more layouts together to form nested layouts.
Root layout
Pic courtesy: nextjs.org
You can create a root layout that will apply to all routes of your application by adding a layout.js file inside the app folder.
Note: The root layout replaces the need for a custom App (_app.js) and custom Document (_document.js) since it applies to all routes. You'll be able to use the root layout to customize the initial document shell (e.g. <html> and <body> tags). You'll be able to use data fetching methods inside the root layout (and other layouts).
Regular layouts
Pic courtesy: nextjs.org
You can also create a layout that only applies to a part of your application by adding a layout.js file inside a specific folder.
For example, you can create a layout.js file inside the dashboard folder which will only apply to the route segments inside dashboard.
Nesting layouts
Pic courtesy: nextjs.org
Layouts are nested by default.
Pic courtesy: nextjs.org
For example, if it were to combine the two layouts above. The root layout (app/layout.js) would be applied to the dashboard layout, which would also apply to all route segments inside dashboard/*.
Pages
New file convention: page.js
Pic courtesy: nextjs.org
A page is UI that is unique to a route segment. You can create a page by adding a page.js file inside a folder.
Pic courtesy: nextjs.org
For example, to create pages for the /dashboard/* routes, you can add a page.js file inside each folder. When a user visits /dashboard/settings, Next.js will render the page.js file for the settings folder wrapped in any layouts that exist further up the subtree.
Pic courtesy: nextjs.org
You can create a page.js file directly inside the dashboard folder to match the /dashboard route. The dashboard layout will also apply to this page:
This route is composed of 2 segments:
- The / root segment
- The dashboard segment
Note: For a route to be valid, it needs to have a page in its leaf segment. If it doesn't, the route will throw an error.
Layout and Page Behavior
- The file extensions js|jsx|ts|tsx can be used for Pages and Layouts.
- Page Components are the default export of page.js.
- Layout Components are the default export of layout.js.
- Layout Components must accept a children prop.
When a layout component is rendered, the children prop will be populated with a child layout (if it exists further down the subtree) or a page.
It may be easier to visualize it as a layout tree where the parent layout will pick the nearest child layout until it reaches a page.
For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.
To develop custom web apps using React JS, please visit our technology page.
Content Source:
- nextjs.org
