Next JS 13 Announced

NextConf 2022 was all about the release of Next.js version 13, with some really cool stuff announced that needs to be emphasized with the Crystallize prism!

The biggest news for us is probably the `app` directory. That is still experimental, but if you follow what we are into (via our Slack community announcements), this is similar to what we are doing when using Remix Run. At Crystallize, we focus on providing a fast GraphQL backend, but we don’t want to be opinionated about frameworks. Looks like we converge on something.

The tech behind the scene is different. Remix Run uses its own approach, Next JS uses React Server Side Component based on RSC, and Gatsby might do something else (V5 is coming), but it seems like we almost have the same concepts in these different solutions:

• Routes that are even easier to describe/use.
• Nested layout: “Layouts share UI between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render.”
• The server is back
  • Server Components
  • Streaming
  • Suspense
• HTTP is back?
  • No more getStaticProps, or getServerSideProps Now it’s
    - fetch(URL, { cache: 'force-cache' });
    - fetch(URL, { cache: 'no-store' });
    - fetch(URL, { next: { revalidate: 10 } });
  • This sounds very close to HTTP Caching concepts!

Naturally, the convergence will provide us with the developer experience and tooling we deserve, as well as the performance we want when we go hunt for milliseconds.

In the near future, we will be fully done with our Remix Run Retail Boilerplate, and that is when we will start building Next JS 13 Boilerplate. It’s not going to be a clone with a lot of duplication of code. We’re doing things a bit differently with two concepts we are currently implementing onto all our boilerplates:

• They are going to use extracted libs and components for better reuse in your own projects and across all the boilerplates. That’s something standard and expected.
• They are going to be “almost” framework agnostic.

85% of the code, if not more, is going to be the same across the (new) boilerplates. This code will not be a set of libraries you need to understand or extend. We want to keep it simple for you, we are providing boilerplates to get you started, we want you just to install them and code them.

Soon to be announced, we are currently working on a tool that will allow you to get started in no time using the framework you want. And you will decide which one is best suited for you based on your business, your team, and so on.

We will focus on showcasing the value that Crystallize is providing!

And that’s why this convergence is crystal(lize) for us and for you.

Back to the basics once again, it’s all about performance. The next.js team announced a new component: The Image Component.

The Next.js image component source code shows something really similar to the Crystallize Image Component. Of course, there are some notable differences between the two. Like, at Crystallize, we provide you with all the different versions of the Image that you need.

But what’s important is that, once again, we converge to provide you with the tooling to build awesome customer experiences.

Of course, for more detail about the rest of the Next 13 released features and updates, check their blog post. Here is a quick overview:

• Turbopack sounds really promising (excited about it as we’re already using Turborepo).
• A @next/font component to optimize Font loading.
• Improved @next/link to simplify <a> management.
• @vercel/og to simplify social card management.
• Middleware API Updates to give you even more control.

So to conclude, we are really excited about that new release and we’re yet to dig into them. 

In the very near future, most likely for Christmas if not before, we’ll release that tool that I can say will be: “Superfast ™”.

When this is done, you can expect a fully new version of our boilerplates in Next.js 13, Gatsby 5, and most likely Astro JS will follow.

Stay tuned!