NextJS to add nested routes and the state of CSS in 2022
Vercel recently released the RFC for nested routes in NextJS. The team at web.dev published a thorough article on the state of CSS in 2022.
🗞 News
According to the team behind NextJS, this is slated to be the most significant update to the framework since its release in 2016. Nested layouts have been an anticipated feature for a long time now and have recently received more buzz due to their use in the other React meta-framework, Remix.
The motivations behind the change are the following:
The developer experience of creating layouts can be improved. It should be easy to create layouts that can be nested, shared across routes, and have their state preserved on navigation
NextJS maps its routes to a page’s directory inside the project files. The new feature of nested layouts will rely on the app folder.
This is a highly anticipated feature as it allows us, developers, to share logic and data between nested routes in a considerably intuitive way. It is also easier to reason about nested routes.
Check out the full article to see exactly how it works as well as some useful diagrams. The RFC also includes information for NextJS releasing support for server components, improved data fetching, and more in relation to nested layouts!
2022 is a very exciting year for CSS as there are a ton of features being added. I already mentioned subgrids and container queries in this past post. Check it out if you want more information on those new features.
Let’s explore some other features that are being added.
color-contrast()
This is fairly huge for accessibility. Having a sufficient color contrast ratio for text is very important for accessible and readable text. Normally this would involve some trial and error in choosing a color and validating its contrast ratio in accordance with the color palette of the site.
However with just the following addition:
color: color-contrast(gray)The browser will automatically select a color with a sufficient ratio.
@layer
CSS as most of you know stands for Cascading Stylesheets, which means that the order in which you write the CSS is very important. This had an after effect where the order of the stylesheets being loaded also was very important as it could re-write other styles.
@layer solves this issue as you can pre-define the order of the styles so nothing will be overridden by the order of loading ever again!
📦 More interesting Articles
âš› React
🎨 CSS
🔧 Other