Relatable Code

Share this post
NextJS to add nested routes and the state of CSS in 2022
relatablecode.substack.com

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.

Diego Ballesteros
May 27
Share this post
NextJS to add nested routes and the state of CSS in 2022
relatablecode.substack.com

🗞 News

Twitter avatar for @vercelVercel @vercel
Next.js Layouts RFC ◆ Nested routes / layouts ◆ Designed for Server Components ◆ Fetch in layouts while avoiding waterfalls ◆ React 18 features – startTransition, Suspense ◆ Client and server routing ◆ 100% incrementally adoptable
Layouts RFCNested routes and layouts, client and server routing, React 18 features, and designed for Server Components.nextjs.org

May 23rd 2022

444 Retweets2,011 Likes

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!

Twitter avatar for @argyleinkAdam Argyle @argyleink
or read up my overview in the State of CSS 2022 post on
web.dev web.dev/state-of-css-2…()State of CSS 2022Web styling features of today and tomorrow, as seen at Google IO 2022, plus some extras.web.dev

May 23rd 2022

4 Retweets21 Likes

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.

Check out the full spec.

@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!

Check out the full spec.

📦 More interesting Articles

âš› React

  • Implementing a React router from scratch

  • Building a combobox

🎨 CSS

  • Dark mode accessibility

  • Complete guide to accessible front-end components

🔧 Other

  • Playwright releases version 1.22

  • Web Applications 101

  • How to ask for a promotion

  • Math support in GitHub markdown

  • A deep dive into AirBnB’s architecture

  • A deep dive into shipping to production

  • How good are we at writing tests

Share this post
NextJS to add nested routes and the state of CSS in 2022
relatablecode.substack.com
Comments

Create your profile

0 subscriptions will be displayed on your profile (edit)

Skip for now

Only paid subscribers can comment on this post

Already a paid subscriber? Sign in

Check your email

For your security, we need to re-authenticate you.

Click the link we sent to , or click here to sign in.

TopNew

No posts

Ready for more?

© 2022 Diego Ballesteros
Privacy ∙ Terms ∙ Collection notice
Publish on Substack Get the app
Substack is the home for great writing