1/ Update on the new Next.js router, with support for nested layouts and React Server Components.
This is the biggest update to Next.js since it was released and incorporates many features from React 18.
We made a quick demo to show some of the features.
Next.js has passed 100,000 stars on GitHub – now the 14th most-starred software repo.
Thank you to our community, from the library maintainers to the educators.
Next.js 13.4.8 includes improvements for compiler performance and various bug fixes.
On Vercel.com, this led to 1.5x faster local server startup and 54% faster updates when making changes (HMR / React Fast Refresh).
Here are the changes we've made to improve performance ↓
◆…
Next.js can be self-hosted using a Node.js server, a Docker container, or a static export.
We've updated our self-hosting docs on:
◆ Runtime environment variables
◆ Custom cache configuration for ISR
◆ Custom image optimization
◆ Middleware
Next.js 13.1 includes a new configuration option to convert imports for barrel files into their direct path.
Learn more from
@leeerob
in this 2-minute demo.
Next.js now has 1 million monthly active developers.
80% of Next.js applications are now on v13 or later. We’ll be releasing v14.2 very soon with further improvements.
Thank you for your continued trust and support.
Learn about the hidden cost with JavaScript runtimes.
By optimizing package imports, we’ve seen 40% faster cold boots when using libraries with many barrel files.
We'd like to share an update on the Next.js App Router and our current focus areas:
◆ Improving Performance
◆ Improving Stability
◆ Improving Developer Education
Get started with Next.js from our official course.
You'll learn about:
◆ Adding styles, fonts, and images
◆ Creating layouts and pages
◆ Fetching and mutating data from Postgres
◆ Handling errors and improving accessibility
◆ ...and more!
We've been rapidly improving Next.js with six new patch releases in the past month.
Here are some of the impactful changes to both the `pages` directory (stable) and the `app` directory (beta) in recent releases ↓
Learn about security protections being built into Next.js.
View our guide for auditing applications, including security best practices for Server Components and Server Actions.
Next.js Middleware allows you to run code before an incoming request is completed.
In 13.1, we've made Middleware more powerful, allowing you to produce responses and set request headers.
Learn more from
@leeerob
in this 2-minute demo.
We've improved our documentation of accessibility features in Next.js:
◆ Provide page names to screen readers and assistive technologies for client-side navigations
◆ ESLint default accessibility rules
◆ Disable JavaScript with an experimental flag
2/ This new router stands on the shoulders of React 18:
◆ Pages and Layouts are Server Components by default, sending less code to the client
◆ Interfaces are non-blocking and can be interrupted if higher priority work happens like transitions
4/ Optimistic loading states using server routing.
When loading UI is provided, navigation is instant and can be shown immediately while a request is made to the server. Otherwise, transitions will suspend with `startTransition`.
Pages remain interactive during transitions.
3/ Layouts can be nested and shared across routes. On navigation, layouts do not re-render, meaning they preserve state and remain interactive.
This enables developers to more easily build complex application layouts and more ergonomically handle success/error/loading states.
Next.js Conf is less than 30 days away. Have you claimed your free ticket?
Join our limited release of in-person tickets to Next.js Conf—San Francisco. Tickets drop in 30 minutes.
5/ On navigation, the “payload” for Server Components is stored in the client-side cache.
◆ Soft pushes don’t refetch from the server, making navigation instant
◆ Hard pushes invalidate the “slice” of data from the server, allowing you to get fresh data
Finally, we've created a new Next.js template to showcase photos from Next.js Conf.
Check out the photos or clone and deploy your own version to take advantage of Next.js 13.
So many excellent details on this website
◆ Image placeholders, lazy loading, optimization
◆ Keyboard support
◆ Carousel sliding updates page scroll upon return 🤯
◆ Parallel routes with direct URLs (e.g.: `/p/2`)
And it's open source of course 🥲
General improvements:
◆ @next/font now supports multiple font weights
◆ Further minification improvements with `swcMinify`
◆ Built-in transpilation of packages, now close to replacing `next-transpile-modules`
These apply to both `pages` and `app` directories.
Next.js 13 comes with a new TypeScript plugin.
We're bringing in-context docs right into your editor and helping surface errors before you even hit save.
Excellent work by the illustrious
@shuding_
✨
`app` directory improvements:
◆ `never` return type for `redirect()` and `notFound()`
◆ Improved CSS modules support
◆ `head.js` is applied to client-side navigations
◆ `cache()` and `fetch()` now correctly de-dupe requests in layouts and pages
Current status on `app` directory: includes 9.3kB less client-side JS than the `pages` directory.
Total first load: -9.3kB (-12.14%)
Next.js: -12kB (-56.79%)
React: +2.7kB (+5.22%)
This baseline doesn't increase whether you add 1 or 1000 Server Components to your app.