`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:
create-next-app now asks if you want to start with Tailwind CSS instead of CSS Modules.
Already out on canary, stable release soon!
npx create-next-app
@canary
The Google Chrome team wrote a RFC for an image components built into Next.js:
◆ Aims to improve performance (LCP and CLS)
◆ Built-in image optimization
◆ Automatic srcset
◆ lazy-loading
Excited to share that I'm the new engineering manager of Next.js at
@vercel
.
Looking forward to continue building Next.js with the team and contributors 🚀
Coming soon to Next.js: you no longer have to provide `href` and `as` for dynamic routes, only `href` will be enough 🚀
In Next.js 9.5 we made some big changes to the Next.js runtime that made this possible.
This is available on next
@canary
if you want to try it out.
Coming 🔜 to Next.js: 30% smaller install size and 40% less dependencies
In addition to that we've also gotten rid of the npm deprecation warnings for packages.
Great work by
@guybedford
and
@timer150
🚀
Next.js will soon ship "modern" JavaScript automatically to browsers that support it, older browsers get served the polyfilled bundles.
This is only the beginning of the collaboration we're doing with the Google Chrome team.
Super significant release, Next.js is now fully hybrid and you can choose per-page if you want to SSG or SSR it.
You get Preview Mode built-in.
And with all these new features you get a 15 kB gzip reduction in runtime size 🤩
Really proud of the work my team has done! ♥
Next.js 13 is stable. Upgrade from Next.js 12 to get these benefits:
◆ Default output target ESModules browsers
◆ No more `<a>` in `<Link>`
◆ swcMinify by default
◆ New next/image without wrappers
◆ Improved InferGetStaticPropsType/InferGetServerSidePropsType
1/5
Wrote a RFC to significantly improve Next.js Static Generation.
◆ Build-time data fetching
◆ Client-side routing with build-time data
◆ Static and server-rendered pages in one application
◆ Static generation for routes coming from a CMS
Next.js has a built-in configuration for Jest now!
◆ Auto-mocking of .(s)css/.module.(s)css and image imports
◆ Transform using SWC
◆ Loads .env variants
◆ Ignores node_modules for transforms / test resolving
Available as experimental on canary:
We've made great progress in our effort to reduce Next.js install size!
◆ 58% smaller install size
◆ 56% less dependencies
Available on next
@canary
today, coming soon to stable!
Note: based on the same base numbers from the previous tweet.
Coming 🔜 to Next.js: 30% smaller install size and 40% less dependencies
In addition to that we've also gotten rid of the npm deprecation warnings for packages.
Great work by
@guybedford
and
@timer150
🚀
Good news for Next.js users that use styled-components, you can now use SWC!
We've ported the critical option of babel-plugin-styled-components that prevents hydration mismatches to SWC 🚀
Learn more:
React Compiler 🤝 Next.js
We've landed an option that automatically configures the React Compiler.
Supports:
◆ App Router
◆ Pages Router
◆ Webpack
◆ Turbopack
Instructions have been updated in the official docs:
A few months ago I did an interview about my journey into tech and open source.
I've never publicly talked or written about this, hopefully it's useful to someone 🙏
It was published today:
Next.js Plugins, coming 🔜🤩
⬩ Zero Config
⬩ Code splitting built in
⬩ Official and community plugins
Super excited about the new possibilities this is going to allow when integrating Next.js with your favorite library 🚀
Today marks 4 years at Vercel for me!
It's been an amazing journey so far, looking forward to the future 🚀
Recently found Guillermo's message from when I told him I'd like to take the offer to join Vercel. Wouldn't have imagined the opportunities I had in these 4 years.
Super excited about this release 🤩
We built all the missing parts to make Fast Refresh work really well consistently. Huge thanks to
@dan_abramov
for collaborating on this.
You can now try out Incremental Static Generation on your website which allows dynamic to become static.
Incredibly proud of the whole team, this release has been the biggest improvement to Next.js to date 🚀
This is just the beginning, we're working on even more performance improvements and DX optimizations, stay tuned! 😌
Here's a deep dive on Next.js 12
We've been working on improving `next export`
◆ App Router compatible
◆ Server Components compatible
◆ Route Handlers compatible
◆ Built-in to `next build`
◆ Ensures development matches static export
Shipped on canary, stable soon!
We’ve been working with the React team at Facebook extensively to bring this vision to life!
Super excited to finally be able to share this proposal! 🚀
As 2020 comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. The demo is available now whether you want to play with it during the holiday, or when work picks back up in the new year.
App Router is now stable 🚢
It's been awesome to see what people have been building during the beta period.
Excited to see what you will do with it now that it is stable!
This has been the biggest release since v1 in 2016.
Wrote a proposal for:
- Dynamic (SSR)
- Static (Pre-rendering)
- Client-side only (CSR/SPA)
On a per-page basis in Next.js.
This allows building truly hybrid web applications 🤩
Full ES Modules support in Next.js coming soon!
Given that there are a few nuances with package loading there will be a few loading modes to ensure existing apps do not break. "esmExternals: true" will eventually become the default.
Great work by
@wSokra
🚀
How to build a production Next.js website that has:
- CDN by default
- Highly available
- Both static and dynamically rendered pages
- Built-in api/ routes support
- HTTPS without configuration
- Staging deployments for every `git push` and PR
1. Write your code
2. now
Next.js 10.2 is out now!
Super excited to roll out webpack 5 to a majority of Next.js users by default while keeping backwards compatibility for apps that did customization. This has been a multi-month effort in ensuring you can upgrade your Next.js app as smoothly as possible
The Google Chrome team wrote a RFC for integrating eslint with Next.js:
◆ Aims to improve performance through conformance checks
◆ Automatically configured
◆ Shares the Babel AST (no extra parsing)
Wrote an RFC for Incremental Static Generation in Next.js:
◆ Works with any data source
◆ Configurable per-page
◆ Integrates with getStaticProps
◆ Regeneration happens in the background
◆ Fully open-source and standalone
◆ Works with existing sites
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
Tailwind CSS build/dev performance tip:
If you have a pattern like this: "../../packages/ui/**/*.{js,ts,jsx,tsx}"
It will cause packages/ui/node_modules to be scanned too.
With this configuration, all .js, .ts, .jsx, and .tsx files are scanned for Tailwind classes. Including
Continued growth of Next.js across Alexa topsites, many well known brands:
IMDb, Spotify, TikTok, Patreon, Oracle, Hulu, Notion, Coursera, Realtor, HBO, Robinhood, IBM, NBA, Whole Foods Market, Dior, Vodafone, Axios, Lyft, Volvo
🦀 New preliminary perf wins using SWC in Next.js
Super excited about the significant optimizations we've been making to both SWC and webpack.
These results are without any codebase changes to 2 existing production apps.
We’ve been working towards integrating in Next.js and I’m super excited and pleased with the initial results, stay tuned!
Excited to share that DongYoon, the creator of SWC, is joining the Next.js team to work on improving dev and build performance!
I recently joined
@vercel
. I used lots of time to reduce the build times of web apps and I'm going to improve it of next js. I love the motto, "Make the web faster".
I'm super excited to announce that Sebastian Markbåge is joining Vercel!
We'll continue working closely with the React team at Meta on React Server Components and other initiatives.
Excited to bring our shared vision for the future of React into reality 🚀
Therefore, I'm joining Vercel starting next year!
I'm lucky that I'll get to keep working on React together with the amazing teams at Meta. I'm also excited to work closely with the equally stacked team at Vercel.
Really proud of this release 😌
Next.js 9.5 adds 6 features that were massively requested by the community 🤩
You'll also be able to try out webpack 5 (currently in beta) 🚀
We've been using to record and investigate complicated bugs while building the Next.js App Router.
In many cases it saved us hours of debugging by being able to record and travel back in time.
Next.js 13.3 includes a new React hook for reporting Core Web Vitals - compatible with the App Router.
It can be used to send Core Web Vitals metrics to your own backend or Vercel Analytics. Use those insights to improve your site's performance.
We’ve turned the Next.js Conf website into a Next.js Starter Kit that you can use to run your own online conference!
Super excited to be open sourcing these efforts after successfully running a conference with tens of thousands concurrent attendees 🚀
Today we're also introducing the Virtual Event Starter Kit used to run Next.js Conf 2020.
This starter was born from the collaboration of marketers, designers, and developers.
Clone, deploy, and fully customize for your next event.
Super excited about these initial results enabling next-swc.
next-swc is SWC with all custom Next.js transforms like styled-jsx, getStaticProps/getServerSideProps tree shaking and other optimizations written in Rust.
Amazing work by
@padmaia
and
@kdy1dev
on this 🎉
Really proud of the work by both my team and the Google Chrome team that's working on Next.js 🤩
next-css was one of the most used dependencies of Next.js projects, either to import a single CSS file or full design systems.
It's now a built-in feature with better constraints.
Next.js 9.2:
⬩ Built-In CSS Imports for Global Styles
⬩ Built-In CSS Modules for Component-Level Styles
⬩ Catch-All Dynamic Routes
⬩ Up to 70% Reduced Largest JavaScript Bundle
⬩ Up to 87% Less JavaScript Loaded after Multiple Navigations
With the latest Next.js canary the `app` directory no longer adds additional `<div>`s
These were used to scroll layouts into view when navigating, this behavior is preserved without needing the extra element.
Available through npm install next
@canary
The Next.js Conf schedule looks amazing!
-
@shubhie
@hdjirdeh
on improving UX
- How Lyft adopted Next.js
- How Tencent scales Next.js to millions
-
@jescalan
When not to use Next.js
-
@type__error
Building a Bank with Next.js
Sign up for your free ticket:
The new Next.js documentation solves nearly all open GitHub issues regarding documentation for Next.js 🤩
Documentation is a continued effort and we’ll keep improving it 🚀
today is a big day for
@sveltejs
: i've joined
@vercel
to work on it full time!
so happy about what this means for svelte's future. it'll be the same independent, pluralistic project as before, but with Vercel's backing we can get ✨ a m b i t i o u s ✨
Landed support for TypeScript's "paths" module alias configuration in Next.js 🚀
◆ Uses established convention for aliasing
◆ Works with your editor
◆ Fully automatic, no additional configuration needed
◆ Works with JS too through jsconfig.json
Up to 5.5x faster incremental builds for all Next.js applications is now available in beta on next
@canary
🚀
To try it out follow these steps:
- Use the webpack 5 beta
- yarn add next
@canary
- run 2 builds: 1st generates the cache, 2nd uses the cache
Wrote a RFC to improve env handling in Next.js:
◆ .env file support
◆ Per-page specification of env needed
◆ Exposed to `getStaticProps` and `getServerSideProps`
◆ Works with both Pages and API routes
Getting closer to App Router stability!
13.3 bring some of the most requested features, now our focus is shifting to performance, enhancing behaviors, and bugfixes.
We’re also still working on Mutations.
Incredibly excited to announce a new major version of Next.js!
We've been working on many optimizations simultaneously both to improve development speed and new APIs that improve loading performance for your end users.
I’m joining
@vercel
as a Design Engineer to continue building customizable UI components for the open source community.
Something incredible coming your way! Can’t wait to get started!
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.
Just opened a PR to fix chokidar file watching hanging in certain cases on macOS 🚀
If you've recently experienced Next.js (or any other framework built on top of webpack) not recompiling after making a file change this could be related to it 👀
Next.js uses nanoid, it’s a really small library to generate random ids. In this case the random id started with “ad_” which is on the Adblock list as “/static/ad_”, likeliness that another id like that will be generated is very low. We’ve patched it to be sure!
We just merged a patch in Next.js that prevents the auto-generated script bundles from starting with `ad`, to prevent adblockers from mis-blocking your app or site 🤯
Thanks to
@thomlbvr
for reporting!
Still super excited about the work the Google Chrome team is doing on Next.js
@stubbornella
did a talk on how Chrome is improving both production performance and DX around performance through frameworks like Next.js
Highly recommend watching:
Awesome example of the UI that route interception in Next.js 13.3 enables.
There are a lot of small details:
◆ The page being rendered (modal) is a Server Component
◆ URL-addressable
◆ Back/forward navigation
◆ Loading UI while loading data
◆ Previous page below the modal
Intercepting routes in
@nextjs
13.3 🤯
You can "intercept" a dynamic navigation to a different page, and display something different instead—for example a product preview.
Then, when the page is refreshed or loaded anew, the regular page loads.
Thanks to amazing work from
@timer150
and
@_developit
Next.js does not bundle getStaticProps and getServerSideProps client-side allowing for direct database queries (if you want to) or reading the filesystem
Next.js + best-in-class data libraries is looking great 🤩
Most exciting is that you can use any data fetching library that works in Node.js, giving you full flexibility 🚀
You can even use different libraries between pages
Woah 🤯 Next.js 9.3 with Prisma is incredible.
◆ `getStaticProps` allows for direct DB queries, only ran at build time – not even included in browser JS bundle
◆ Prisma provides type-safe access to SQLite
◆ Auto-generated based on DB schema
Super interesting to follow the continued growth of Next.js in The Netherlands. So many well-known brands:
Marktplaats, Corona Dashboard (Rijksoverheid), TicketSwap, Blendle, Pearle, Leenbakker, Auping, BNNVARA, United Wardrobe, Werkspot, Kijk (Talpa), Dopper, RTL XL
New Next.js RFC: Changing the default output target to ESModules
Sharing our plan for moving the targeted browsers while providing backwards compatibility for applications that need to support older browsers.
Sorry to hear you're running into issues
@flybayer
@TejasKumar_
. Please give me access to your repository.
I'll do all this for free:
◆ Upgrade your application to Next.js 14
◆ Share why your app had trouble upgrading publicly
◆ I'll investigate the memory usage how/why