Next.js 13.2 Explained!
Next.js 13.2 Explained!
Next.js 13.2 includes major improvements to the App Router (app) in preparation for stability. Upgrade today: https://nextjs.org/blog/next-13-2
Timestamps
0:00 – Introduction
0:11 – Built-in SEO support
1:20 – Demo: Metadata API
4:09 – Route Handlers
4:52 – Demo: Custom Route Handlers
5:55 – Statically typed links
6:14 – Demo: next/link and TypeScript
7:07 – Improved error overlay
7:55 – MDX for Server Components, Rust MDX parser, and more!
Learn more:
◆ 13.2: https://nextjs.org/blog/next-13-2
#nextjs #vercel
Content
0 -> We're back with another Next.js release 13.2,
3.13 -> including some major improvements
5.08 -> to the app router or app directory,
6.8 -> as we push forward towards stability.
8.92 -> Let's take a look.
10.19 -> in Next.js 13.2,
11.5 -> We have built-in SEO support
13.19 -> through a new metadata API
15.6 -> making it easier than ever to customize meta in link tags
19.6 -> to optimize your site for sharing on the web.
21.8 -> This replaces the previously beta API, head.js
25.4 -> which was temporarily used to do metadata
28.28 -> inside of the new app router.
30.1 -> So let's take a look at these new changes.
32.6 -> On my left, in my editor
33.5 -> I have by RootLayout inside of my application.
36.2 -> Now as a quick refresher,
37.71 -> the app directory or app router has support
40.1 -> for nested layouts and our route layout is
42.5 -> at the top of our tree.
44.2 -> So at the top of our tree at the entry
46.4 -> point into our application,
47.7 -> for rendering a layout,
48.9 -> including our HTML document, and we're able to set some
52.5 -> metadata on our document,
54.8 -> including the title and the description.
56.9 -> Now, if we look over in the right in our browser,
59.4 -> we see that in the head of our HTML document,
62.9 -> we see, not only the two default meta tags
65.95 -> added for the viewport,
68 -> as well as the character set.
69.33 -> We see the title and the description.
72.56 -> Now you might be wondering,
73.57 -> Okay, this works for global metadata
75.33 -> on my application,
76.5 -> But what about when I want to customize it
78.65 -> on a per route basis?
80.3 -> So, to demonstrate this,
81.7 -> let's look at this page.
83.4 -> /products inside of apps/product/page.tsx
89 -> where this is rendering the product page.
90.9 -> And on this page we've overridden,
93 -> the metadata to define a different title.
96 -> Now on the right,
97.3 -> if I go in our browser and I navigate to /products
99.9 -> you'll see that the head element
102 -> here is updated to override and take the new
105.2 -> title value for Products, while keeping the
108.39 -> previously defined metadata
109.97 -> at the root of our layout.
111.2 -> So you can override this as you see fit, but
113.07 -> what about if we have dynamic metadata?
115.5 -> Don't worry, the new metadata API
117.9 -> with the app router has you taken care of
119.8 -> Let's look at a little bit more of a complete example.
122.5 -> So on the left in my editor,
124.1 -> we have /products folder /id
127.4 -> which is a dynamic route segment,
129.3 -> taking in some value.
130.4 -> And then we have a page.tsx for this route.
134.46 -> Now inside of this file,
135.73 -> we have a generate metadata function.
138.1 -> This is the special sauce that allows you to handle
141.4 -> generating dynamic metadata,
143.67 -> for a page based on some external API call,
146.73 -> some database call, etc.
148.7 -> So in this file,
150 -> on line 22 here,
151.1 -> were grabbing the product data for this route based on
154.8 -> the dynamic parameter of id.
156.69 -> Now the id, again, is defined by
158.98 -> that dynamic route segment defined in the file,
161.74 -> and then returning the title,
163.7 -> just like we did when it was static.
165.7 -> But in this instance, we're pulling that value,
168.3 -> back returned from the API.
170 -> Now, a really neat thing about the app router, in Next.js,
174.2 -> is that the same data fetching code,
176.5 -> the same promise that we used to fetch our product
179.1 -> for generateMetadata,
180.53 -> we can also use, inside of our actual product page,
183.8 -> our server component, where we're
185.55 -> rendering our product and because there's
187.87 -> an automatic deduplication, an automatic fetch caching,
191.69 -> that same request will only happen once,
194.4 -> so we're able to easily reuse that function's result across
197.7 -> both generating the metadata,
199 -> as well as actually rendering out that page.
202.2 -> So, over the right in the browser notice that we see
206 -> the text of the product title as well as we
209.4 -> see the metadata updated with the title of the product name
212.8 -> and if I were to change from product/1 to 2,
216.1 -> this is a dynamic route.
218.3 -> So it reads that value of 2 and changes,
220.8 -> the API call based on that data.
223.4 -> One last bonus point that's really nice
225.1 -> in the app router is that you'll notice that I'm
227.8 -> able to use getProduct inside of my server component,
231.8 -> and it's fully typed end-to-end.
234.2 -> So, if you notice on product,
235.9 -> I see the value of this interface product that we've defined
238.6 -> I can do .title and access what properties are here.
241.6 -> So if I type something wrong, for example,
243.5 -> I'll get those helpful lines in my editor,
245.9 -> where Typescript is telling me hey
247.1 -> by the way, you used a value that does not exist.
249.8 -> All right, next up in 13.2,
251.5 -> let's talk about route handlers.
254 -> Route handlers allow you to create custom request handlers
257.16 -> that take in some web request and return some web response.
262.21 -> So this is built on web standard APIs,
264.4 -> and this API is an evolution of the API route
268.5 -> inside of the pages directory.
270.1 -> So, this is specifically for the app router in Next.js 13.2,
274.4 -> and it allows you to seamlessly transition between the different
278.2 -> run times and Next.js, both
279.5 -> the Node.js run time as well as the
281.9 -> end run time and learned these web APIs once
285.4 -> and use them everywhere, inside of route handlers,
287 -> inside of your rendering code, inside of middleware and
291.3 -> in other frameworks.
292.5 -> Now, you'll notice the convention here
294.19 -> inside of this route.ts file
296.51 -> that I've defined inside of my file system.
298.8 -> That's what marks this route as a route handler
301.91 -> so /items again, this doesn't have to be named API,
305.9 -> this Is a new concept that is inspired by API routes.
309.7 -> So in my browser on the right,
311.3 -> I'm at /items, and this is a GET request,
314.31 -> and you see, it's returning the text items.
316.8 -> So I have a new function here,
318.7 -> that is returning a response for the GET request,
322.3 -> but the nice thing about route handlers
324.45 -> is that I can define any of the HTTP verbs.
327.3 -> Whether it's a PUT opposed to GET, a DELETE, etc.,
330.2 -> and I can use those inside of the same file.
332.7 -> So no more if statements for having to check,
334.5 -> whether it's a GET or a POST or a PUT
336.52 -> and because this is built on the same primitives
338.4 -> as the rest of the app router,
341.4 -> I can also use helpful functions like headers or cookies
345.7 -> to easily access these values.
347.7 -> and even extract this logic out into shared functions across
351.3 -> my rendering code as well as my route handler.
354.5 -> Next.js 13.2 also includes something that I've wanted for a long time
359.1 -> truly an amazing innovation inside of the framework.
362.2 -> and that is statically typed links.
364.4 -> So if you're using Typescript and you're using the app router
367.5 -> wouldn't it be amazing if the framework could tell you
370.84 -> that you had a typo when you're trying to link to another page.
374.1 -> So let's take a look at what I mean.
375.7 -> On this product page, so products/page.tsx or /products
380.58 -> inside of my browser.
381.7 -> I have a link to the homepage; and the homepage,
385.3 -> href here is "/" to go back to the index route
388.4 -> and everything works fine here.
389.5 -> If I click on home in the browser,
390.8 -> I go back to the homepage.
392.5 -> But let's say I made a mistake and I accidentally
395.8 -> typed this, now this "/g" route does not exist and
401.5 -> now Next.js will statically type links
404.4 -> and using the Typescript plug-in is able to
407.2 -> automatically understand all of the routes in your application and
410.6 -> give you those helpful, red squiggly lines
413.1 -> wherever you're using Typescript,
414.3 -> so that you can get this in editor feedback before
417 -> you ship to prod and then notice your link isn't working.
420.2 -> So this is a massive developer experience win.
423.4 -> It will hopefully help you create more safe applications
426.12 -> when navigating between pages.
427.77 -> Now, let's say I didn't have a typo on the string
430.9 -> for my href, but I had a typo somewhere
433.4 -> else in my code that cause my code to throw an error.
435.8 -> Now in 13.2, we really improve the error overlay
439.71 -> to give you helpful information when you're debugging
442.47 -> So in my browser you notice first off in the
444.8 -> top-right, it tells me that Next.js is up to date.
446.9 -> So this version staleness indicator can help you understand,
450.3 -> is it because I'm on an older version,
452.1 -> where maybe this fix has been patched?
454.2 -> Or am I on the latest version and maybe
456.6 -> it's an issue in my code?
457.72 -> Second, we've now broken out specific
460.43 -> stack traces for both Next.js and React.
463.3 -> So it's easier to understand, is this a Next.js code error
466.73 -> or is it may be an upstream error with React?
469.72 -> That can greatly help with your debugging and we're
472.4 -> really excited to roll out this improved error overlay in 13.2.
475.9 -> Now that's not at all for new features and improvements
478 -> in Next.js 13.2.
479.7 -> There's also MDX support for server components,
483.2 -> which you can use in Next.js' own plugin
485.7 -> or in community packages.
486.9 -> There's a new Rust based MDX parser,
489.5 -> that will help speed up all of your builds
492.1 -> that are using MDX with Next.js,
494.2 -> and there's also improvements to Turbopack, which is in alpha,
497.83 -> including much better support inside of Next.js
500.1 -> as we're furthering along the path towards beta and support
503.9 -> and compat with some webpack loader.
505.9 -> So you might want to check out Turbopack.
507.3 -> If you have it, let us know your feedback on the app router
510.32 -> as we push forward towards stability and stay tuned
513.1 -> for the next one.
Source: https://www.youtube.com/watch?v=UfNMlhu3L4I