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.
Learn Next.js with our free courses:
Foundations
◆ JavaScript to React
◆ React to Next.js
◆ How Next.js works
Create Your First App
◆ Styling Pages
◆ Data Fetching
◆ API Routes
◆ Deploying
SEO
◆ Crawling and Indexing
◆ Core Web Vitals
Migrating a custom React + Express app to Next.js:
◆ 41.6% improvement in loading speed
◆ Removed half of the loading screens, reducing client JS
◆ Redux → React Query
◆ React Router → Next.js
Great post on incrementally adopting
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
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.
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
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.
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
Next.js 12.2:
◆ Middleware: Dynamic routing for your entire app
◆ On-Demand ISR: Update content without redeploying
◆ Edge Runtime (Exp): API Routes and SSR based on Web standards
◆ `next/image` (Exp): Faster & more flexible new version
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
📣 The Next.js router is getting a major upgrade!
◆ Nested routes / layouts
◆ Client and server routing
◆ React 18 features – startTransition, Suspense
◆ Designed for Server Components
◆ 100% incrementally adoptable 🤯
Expect an RFC very soon 👀
`next/link` will no longer require manually adding `<a>` as a child!
This supports both string literals as well as custom React components as children.
Starting in the next minor release, you'll be able to opt-into this behavior.
PR with more details: https://github.com/vercel/next.js/pull/36436…
React 18 is now available on npm!
Here’s an overview of what’s new in React 18, and what it means for the future.
https://reactjs.org/blog/2022/03/29/react-v18.html…
Next.js 12.1:
◆ On-demand Incremental Static Regeneration
◆ SWC support for styled-components, Relay, and more
◆ Zero-configuration Jest support
◆ ~80% smaller Docker images when self-hosting
◆ Next.js Developer Survey