Model 13 of Subsequent.js, a well-established React framework from the Vercel firm, was launched final week.
The announcement was made on the Subsequent.js Conf and took the group by storm. Builders worldwide unfold the information concerning the options and goodies introduced reside on October twenty fifth.
Now, because the mud slowly settles, we will undergo what’s new in Subsequent.js 13.
app/ Listing in Subsequent.js 13 (In Beta)
What higher method to take a look at what’s new than by constructing a easy app, proper? Bounce-start a brand new Subsequent.js 13 undertaking with this command:
Observe that --typescript is elective, you may omit it.
Alright, let’s now soar into the format options in Subsequent.js 13.
Subsequent.js at all times allowed you to easily create a file in your undertaking after which have Subsequent.js create a route based mostly on it. This makes for an ideal developer expertise. Now, Subsequent.js 13 goals to enhance routing and layouts by introducing the app listing to the foundation of your Subsequent.js undertaking.
This function remains to be in beta, and it’s totally elective. You’ll be able to preserve your pages listing and have it coexist with the app listing – or simply skip including app dir in any respect.
One factor it’s important to do is inform Subsequent you’ll use it by including the next to subsequent.config.js:
const nextConfig = {
experimental: { appDir: true },
}
Then, you may create the app listing with a web page.tsx file like so:
export default operate Web page() {
return <h1>Hi there, I'm Web page!</h1>
}In fact, you probably have pages/index.tsx, it’s important to both rename or delete it. You’ll should make up your thoughts right here, as you may’t have each. Whenever you take care of pages/index.tsx, the working Subsequent.js server will create app/format.tsx – how considerate, thanks, Subsequent.js!
Your web page app/web page.tsx didn't have a root format, we created app/format.tsx for you.Now the app/format.tsx has been created for us, let’s take a look at layouts in Subsequent.js.
Layouts in Subsequent.js 13
Layouts in Subsequent.js make it simpler to extract shared code between a number of pages. format.tsx accepts one other format or a web page as a toddler. Right here’s the way it appears to be like:
export default operate RootLayout({
kids,
}: {
kids: React.ReactNode
}) {
return (
<html>
<head></head>
<physique>{kids}</physique>
</html>
)
}Now, with app/web page.tsx and app.format.tsx in your undertaking, you may rock and roll. To get a little bit of styling, copy the boilerplate CSS from pages/globals.css to app/international.css. Then embrace it in app/format.tsx like so:
import "./international.css"
export default operate RootLayout({
kids,
}: {
kids: React.ReactNode
}) {
return (
<html>
<head></head>
<physique>{kids}</physique>
</html>
)
}After which, once you run npm run dev and go to http://localhost:3000/ you need to see one thing like this:
In fact, you may create one other web page like app/product/web page.tsx with a format for merchandise – app/product/format.tsx.
Let’s see what else is new.
React Server Elements
In the event you use Server Elements in Subsequent.js, you may scale back the quantity of JavaScript despatched to the consumer, enabling sooner preliminary web page hundreds. We touched a bit on this topic when React 18 got here out.
And what’s nice in Subsequent.js 13 is that every one elements contained in the app listing are React Server Elements by default, together with particular information and colocated elements (exams, types, different elements, and so on.). That method, you’re set as much as obtain efficiency positive aspects with out doing any work or rewriting your elements.
When a web page is loaded, the Subsequent.js and React runtime will load, which is cacheable and predictable in measurement. This runtime stays the identical measurement as your utility grows. Further JavaScript will solely be added as client-side interactivity is required in your utility by means of using Shopper Elements.
You should use Shopper Elements by specifying a "use consumer" directive on the prime of the part meant for the consumer. Let’s create a brand new file beneath app/counter/web page.tsx:
"use consumer"
import { useState } from "react"
export default operate Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked the Depend++ button {depend} occasions</p>
<button onClick={() => setCount(depend + 1)}>Depend++</button>
</div>
)
}It’s best to add "use consumer" when:
- utilizing
useStateoruseEffectconsumer hooks from React - you rely on sure browser APIs
- you wish to add sure occasion listeners
In different instances, once you don’t want issues from the consumer, it’s best to depart elements as they’re and allow them to be rendered as Server Elements by Subsequent.js. That may assist make sure the smallest quantity of client-side JavaScript code.
In the event you determine to make the most of useState or every other consumer hooks, Subsequent.js will fail to render and present an error like so:
I ponder why "use consumer" doesn’t occur robotically. However anyway, there you go – it’s onerous to make a mistake as a result of Subsequent.js actually made the developer expertise nice.
On that word, there’s a fair larger goodie relating to developer expertise: information fetching and displaying loading states. Let’s soar into it!
Streaming and Information Fetching
In Subsequent.js 13, now you can simply stream elements of the UI to the consumer with React Suspense. For instance, if information fetching is ready to finish, you may present a loading state to the person. Then when the info fetching is full, new information can be streamed to the web page instead of the beforehand proven loading state.
The API to fetch information has been simplified, and the outdated APIs getServerSideProps, getStaticProps, and getInitialProps usually are not supported within the new app listing.
It is strongly recommended that you simply fetch information inside Server Elements (those we touched on within the above part). That method, fetching and rendering occur in the identical setting, lowering the forwards and backwards between consumer and server and, finally, the work achieved within the browser.
You’ll be able to fetch information wherever within the app listing, however due to the way in which Streaming and Suspense work in React, you need to undertake a brand new psychological mannequin when fetching information. Specifically, you need to fetch information straight within the elements that use it, even when you could request the info in a number of elements. Behind the scenes, React and Subsequent.js will cache and dedupe requests to keep away from the identical information being fetched greater than as soon as.
Streaming and Fetching in Server Elements
What’s nice concerning the new Subsequent.js launch is that you could present a loading state just by making a loading.tsx file. On this instance, we made app/dashboard/loading.tsx like so:
export default operate Loading() {
return <p>Loading the Dashboard...</p>
}And in app/dashboard/web page.tsx we have now the next code:
async operate getData() {
await new Promise((res) => setTimeout(res, 3000))
return "Dashboard information"
}
export default async operate Web page() {
const identify = await getData()
return <p>🤩 Hi there {identify}!</p>
}If we attempt to load http://localhost:3000/dashboard, there’ll first be a loading display screen after which the dashboard will present up.
You’ll be able to dig deeper and use React’s Suspense to additional break down the UI. You can also make certain the format renders whereas a selected part within the format waits for information to be fetched.
Having the ability to make the most of async/await in Server Elements is nice and is a part of React’s RFC so as to add first-class help for Guarantees. It permits us to do what we simply did in app/dashboard/web page.tsx:
export default async operate Web page() {
const identify = await getData()
return <p>🤩 Hi there {identify}!</p>
}However we will’t use async/await on this method in Shopper Elements. Let’s see how we will fetch information there within the subsequent part.
Streaming and Fetching in Shopper Elements
The instance above confirmed the right way to show a loading display screen whereas information is ready for rendering in Server Elements. However if you wish to do the same factor on the consumer, it’s important to make the most of the use hook.
Let’s change our instance to verify it’s rendered correctly as a Shopper Part. We’ll create app/dashboard-client/loading.tsx – will probably be the identical, however with totally different copy:
export default operate Loading() {
return <p>Loading the Dashboard in Shopper Elements...</p>
}Then use the app/dashboard-client/web page.tsx with the use hook from React like so:
"use consumer"
import { use } from "react"
async operate getData() {
await new Promise((res) => setTimeout(res, 3000))
return "Dashboard information in Shopper Elements"
}
export default operate Web page() {
const identify = use(getData())
return <p>🤩 Hi there {identify}!</p>
}Discover how we name use(getData()). It’s because use is a brand new React operate that accepts a promise and is conceptually much like await. We’d like use as a result of it handles the promise returned by a operate in a method appropriate with elements, hooks, and Suspense. The use hook is part of the React RFC we talked about earlier.
If we go to http://localhost:3000/dashboard-client, we should always see the same factor as earlier than. The loading state reveals briefly till the precise dashboard seems.
Caching with Fetch
The fetch() operate is a Net API that will get distant assets and returns a promise. React extends fetch to offer computerized request deduping, and Subsequent.js extends the fetch choices object so every request can set its personal caching and revalidating.
So React and Subsequent.js take the fetch browser API and put some sprinkles on prime. Now in Subsequent.js 13, you may specify the way you need requests to be cached (or in the event you don’t need them to be cached in any respect):
fetch(URL, { cache: "force-cache" })
fetch(URL, { cache: "no-store" })
fetch(URL, { subsequent: { revalidate: 10 } })And that’s it so far as streaming and fetching goes. You’ll be able to learn extra about it in Subsequent.js’ official docs right here.
Now let’s go into one thing which drew a number of consideration from the frontend world – a 700 occasions sooner bundler, Turbopack.
Turbopack
Turbopack is branded as an “as much as 700x sooner Rust-based Webpack substitute”. It even incorporates a small letter to the general public from the Webpack creator himself – Tobias Koppers. Tobias is main the initiative and the undertaking, which might solely imply excellent news for the entire frontend group.
Proper now, you need to use Turbopack with Subsequent.js 13 in the event you run subsequent dev --turbo (or, in the event you’re working it by way of npm within the undertaking we generated in the beginning – npm run dev --turbo).
It helps Server Elements, TypeScript, JSX, CSS, and extra. Because the undertaking is in alpha state, lots of the options usually are not but supported. We are able to solely hope for a secure launch to hurry up tasks the world over.
subsequent/picture Enhancements
The brand new Picture part in Subsequent.js comes with much less client-side JavaScript, is simpler to type and configure, and extra accessible (requiring alt tags by default).
When it comes to code modifications, the subsequent/picture import has been renamed to subsequent/legacy/picture, and the subsequent/future/picture import renamed to subsequent/picture. There’s a codemod that will help you migrate shortly.
If you weren’t utilizing width and peak on non-static photographs (or photographs with out the fill property), you’ll now should set them. The identical goes with the alt prop, although it isn’t required and could be left as an empty string.
Right here’s a information on migrating to the brand new subsequent/picture.
@subsequent/font
The brand new @subsequent/font helps you to use Google Fonts (or any customized font) with out sending any requests from the browser. CSS and font information are downloaded at construct time with the remainder of the static property.
To strive it out, you could set up the package deal:
Then, you need to use it like this:
import { Montserrat } from "@subsequent/font/google"
const montserrat = Montserrat()
export default operate Web page() {
return (
<article>
<h1>Hi there, I'm Web page!</h1>
<p className={montserrat.className}>I'm utilizing Montserrat font</p>
</article>
)
}subsequent/hyperlink Enchancment
You not have to incorporate the <a> tag when utilizing subsequent/hyperlink.
import Hyperlink from 'subsequent/hyperlink'
<Hyperlink href="/dashboard">
<a>Dashboard</a>
</Hyperlink>
<Hyperlink href="/dashboard">
Dashboard
</Hyperlink>There’s additionally a codemod that will help you take away any additional <a> tags you’ll have in your present undertaking.
Producing OG Photographs with @vercel/og
A brand new @vercel/og library means that you can generate open graph (OG) photographs. It’s well-known that OG photographs can improve the engagement charge for hyperlinks you share.
Vercel and Subsequent.js have been discussing this subject for a while, offering you with docs to generate OG photographs by way of features. However now there’s a new information that reveals how one can make the most of the brand new Edge Runtime along with the @vercel/og library.
Middleware API Adjustments
Subsequent.js 13 improves the Middleware function. Vercel’s Middleware is code that executes earlier than a request is processed on a website. There, you may modify an incoming request and add some logic earlier than the request is processed.
Now it’s simpler to set headers within the middleware. Plus, you may straight return a response from the middleware, without having to rewrite or redirect. However for this, you could allow the experimental.allowMiddlewareResponseBody configuration possibility inside subsequent.config.js.
To get began, you could have middleware.js or middleware.ts on the root of your Subsequent.js undertaking. We’ll use the TypeScript model and present how one can set a header to an incoming request:
import { NextResponse } from "subsequent/server"
import kind { NextRequest } from "subsequent/server"
export operate middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers)
requestHeaders.set("header-for-the-server", "hi there server")
const response = NextResponse.subsequent({
request: {
headers: requestHeaders,
},
})
response.headers.set("header-for-the-client", "hi there consumer")
return response
}You are able to do the identical within the undertaking we have been utilizing from the start and examine the headers of http://localhost:3000/ within the browser. There, you need to see the header-for-the-client header within the Community tab.
Telemetry
I’m not certain if this was there earlier than, however after I ran npm run dev (or subsequent dev) after upgrading, I bought this message:
Consideration: Subsequent.js now collects fully nameless telemetry concerning utilization.
This info is used to form Subsequent.js' roadmap and prioritize options.
You'll be able to be taught extra, together with the right way to opt-out in the event you'd not prefer to take part on this nameless program, by visiting the next URL:
https://nextjs.org/telemetryIt could be that that is simply the primary time I observed it, and I can’t discover written proof of when Subsequent.js began gathering nameless utilization studies.
Anyway, you may simply opt-out by working:
npx subsequent telemetry disableYou may also shortly examine if that is disabled or enabled for you:
npx subsequent telemetry standingIn any case, I really feel that gathering utilization information ought to be elective and never turned on by default.
Wrapping Up: Subsequent.js 13 Brings Nice New Options
That’s all, people! We’ve gone by means of all of the updates in Subsequent.js 13. I hope this model is thrilling for you. Bounce in and discover the brand new options!
I pushed the code examples on this submit right into a GitHub repo. There’s additionally a reside demo you may play with.
You’ll be able to try the official Subsequent.js announcement, which additionally covers breaking modifications.
Thanks for studying, and see you within the subsequent one!
