7 ms·

Hey everyone, Lee from Vercel here! Happy to answer any questions about Next.js 12. Personally, I'm extremely excited for the new Rust compiler.

by leerob 5y ago

vrepsys 5y ago
How about on demand page revalidation* ? I can't find if it's part of Next 12. * https://github.com/vercel/next.js/discussions/11552#discussioncomment-2655 https://github.com/vercel/next.js/discussions/11552#discussi...
- leerob 5y ago
  It is not part of Next.js 12 – still working on it!
tofuahdude 5y ago
How does middleware work when using a CDN to host the JS bundles? ie what happens when I've already loaded the bundles and am transitioning to a page that has different middleware requirements? Is it a client-only middleware implementation? (I want this and have implemented a poor man's version in my _app.tsx).
emadabdulrahim 5y ago
What's the timeline on React Server components? It seems next 12 experimental feature of Server component is a very early look? Since React 18 is not out yet, and it's not planned to have Server component in that release.
- leerob 5y ago
  It's available to try today under an experimental flag. React 18 is still in alpha. We'd love to hear your feedback!
meowtimemania 5y ago
Can we still use obscure babel macros with the new Rust compiler? And if so, what do you think the future will look like for babel macros in a future where most build tooling is written in languages like rust/go?
- capableweb 5y ago
  > in a future where most build tooling is written in languages like rust/go You really think most of the build tooling will be written in other languages than JS? Compilers make sense, they are very CPU bound, but otherwise build tooling should also be accessible to modify to the developers working in the project, not just those who use Rust/Golang. And I'm sure we'll still use JS projects for some of the tooling.
  - topspin 5y ago
    "You really think most of the build tooling will be written in other languages than JS?" Deno is using the same compiler (SWC) so there is data point number two on the question. esbuild is another...
- leerob 5y ago
  We're working on making it easier for developers to write Rust plugins to handle their own transformations.
leohonexus 5y ago
Is Next.js Live only available if the project is hosted on Vercel?
- sudhirj 5y ago
  No, it works fine with any static hosting system, like S3+CDN, Netlify or others. The API feature (FaaS) needs special server handling to run, but they're just Node functions, so other systems also add support. Vercel just has first class support where everything just works, but can you host it yourself.
julenx 5y ago
Also excited about the Rust compiler! Apologies if this is far from reality, but by looking at recent commits in GH[1] it looks as though this has been rushed for a v12 release, so I was wondering how much of internal testing has this been going through before pushing it to the broader public. [1] https://github.com/vercel/next.js/commits/canary https://github.com/vercel/next.js/commits/canary
- vaughan 5y ago
  The Rust compiler is just swc which has been around as another project for ages. Checkout it’s home page. Many people are using it.
  - leerob 5y ago
    Yeah, Deno is using it as well!
    - devongovett 5y ago
      And Parcel: https://parceljs.org https://parceljs.org
- leerob 5y ago
  We've been testing SWC for months now, both with early community members on canary releases and with Vercel customers. Lots of the rushing at the end was for minification, which is opt-in because of this. But compilation with Rust (replacing Babel) is stable (which is why it's on by default).
  - julenx 5y ago
    Thanks for clarifying, Lee!
throw123123123 5y ago
Hey Lee. I am not entirely sure how server-side components replace the dynamic/static balance next.js is now the market standard for. 1) Do the .server files require any special infrastructure for self hosted solutions? 2) If we move to ISR to a component level, would that mean that a page with multiple components will generate a backend-process thrash of multiple refreshes? (say 10 components, each with a revalidate 1 s) 3) Is there a good mapping to translate ISR to server side components from both UX and infrastructure/implementation?
- leerob 5y ago
  1. No, when self-hosted, server files will just run on your server :) 2. You can use the `keys` prop to prevent that (this is still very experimental and the API is not finalized). 3. We will be sharing more on this soon, but yeah still early days.
mcintyre1994 5y ago
How do you achieve no cold boots on edge functions? Is it the same approach as Cloudflare (https://blog.cloudflare.com/eliminating-cold-starts-with-cloudflare-workers/ https://blog.cloudflare.com/eliminating-cold-starts-with-clo...) or something else? Are there any tradeoffs to be aware of with your approach vs theirs if they're different?
- leerob 5y ago
  Vercel's Edge Functions are built on top of Cloudflare Workers. The runtime is designed for any similar provider, but we've chosen Cloudflare for now because they have an amazing product.
  - mcintyre1994 5y ago
    Awesome!! Thanks for the answer :)
  - mrahmadawais 5y ago
    Excellent decision!
atoko 5y ago
Are there any plans to address Bazel compatibility? I understand that the Next philosophy is very monolithic but so far I’m having trouble getting it to play nice with build tooling.
- leerob 5y ago
  We may investigate this more in the future, but nothing planned currently.
robertoandred 5y ago
Does Next 12 allow for getStaticProps() in _app.js?
- leerob 5y ago
  It does not, but with React Server Components, you can achieve the same result. https://nextjs.org/docs/advanced-features/react-18 https://nextjs.org/docs/advanced-features/react-18
yewenjie 5y ago
When can we expect the docs to be updated?
- leerob 5y ago
  They are now updated! Sorry for that. The NPM release took a bit longer than expected.
kylehotchkiss 5y ago
Hey Lee! Loved the new features and your session on edge. One further-future question - would react server components ever be able to execute on the edge or will those always run from the datacenter you've deployed to? And regions - Cloudflare Workers offers 44 regions in North America and Vercel currently offers 4. Does your team have any plans to add some more edges around the world to bring the speed benefits closer to end users? Thanks to you and your teams incredible hard work on all the new features. Next.js has been a blast to use the past 5 years. Looking forward to the next 5!
- leerob 5y ago
  Yes, the Hacker News demo shown does run at the Edge (using Vercel Edge Functions) when deployed. If you self host, it would run on your server of choice. Vercel doesn't have 4 regions, we have 17 :)
svachalek 5y ago
I'm building a custom server (which hopefully now can be replaced with middleware?) which I build with tsc: $ tsc --strict --esModuleInterop --moduleResolution node --jsx react --outdir build server.ts node_modules/next/dist/server/config-shared.d.ts:1:15 - error TS2724: '"next/dist/compiled/webpack/webpack"' has no exported member named 'webpack5'. Did you mean 'webpack'? 1 import type { webpack5 } from 'next/dist/compiled/webpack/webpack'; ~~~~~~~~ Probably there's some workaround but the compile error seems legit. Is there something I can do about it until I figure out middleware?
- theobr 5y ago
  Webpack is no longer a dependency of Next.js - this was the big announcement about the compiler. You will have to opt out of the new SWC compiler (if this is an option atm)
  - acemarke 5y ago
    That doesn't seem correct. Next _does_ still use Webpack - it's what does the actual bundling: > Underlying webpack improvements: We've made numerous improvements to webpack, including optimizing Fast Refresh and making on-demand entries more reliable. > After making webpack 5 the default in Next.js 11, we've now officially removed webpack 4. We've worked closely with the community to ensure a smooth transition to webpack 5. SWC is the equivalent of Babel for transpiling JS, not Webpack for bundling.
leotaku 5y ago
I'm personally curious how the Next is able to achieve the claim of "zero client-side JavaScript" mentioned here[1] using react server components? It just doesn't seem to make sense to me, and the HN clone example and my barebones test project also clearly still load about 74.2 KB of JavaScript. Is the claim supposed to mean that the server components won't require additional JS, or maybe that they won't need to execute any client-side JS to be fully rendered? [1]: https://nextjs.org/docs/advanced-features/react-18#react-server-components https://nextjs.org/docs/advanced-features/react-18#react-ser...
- agrunyan 5y ago
  Seems he missed your question, which I’m also curious about.
- robertrbairdii 5y ago
  From my understanding from watching the keynote earlier today, the reason that demo has JS is that repo opted in to have client side code to handle the upvote functionality. If it didn't require that interactivity it could be shipped with no client side JS. The client side js code is defined in the component files ending in .client.js https://github.com/vercel/next-rsc-demo/tree/main/components https://github.com/vercel/next-rsc-demo/tree/main/components
- k__ 5y ago
  Also, does "no client-side JS" also work with Cloudflare Workers?
- krall12 5y ago
  I think it means that any page that only renders server components can just push the built html to the browser. If there were to be client components, like an upvote button, react would be required for that to hydrate the DOM. It’s very similar to what Astro is doing. Only adding the JS if it’s actually necessary.
- leerob 5y ago
  You can read more here on the original RSC announcement: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html https://reactjs.org/blog/2020/12/21/data-fetching-with-react.... RSC are still experimental, and as mentioned, this demo has some client-side functionality (upvotes).
techpression 5y ago
Any chance we’ll get a proper official routing mechanic that doesn’t rely on the file system and magical file names?
dev-3892 5y ago
The module federation story was a bit complicated pre-webpack 5. Are there plans in the roadmap to further support module federation?

Hey everyone, Lee from Vercel here! Happy to answer any questions about Next.js 12. Personally, I'm extremely excited for the new Rust compiler.

by leerob 5y ago

Hey everyone, Lee from Vercel here! Happy to answer any questions about Next.js 12. Personally, I'm extremely excited for the new Rust compiler.

vrepsys 5y ago

How about on demand page revalidation* ? I can't find if it's part of Next 12. * https://github.com/vercel/next.js/discussions/11552#discussioncomment-2655 https://github.com/vercel/next.js/discussions/11552#discussi...

leerob 5y ago
It is not part of Next.js 12 – still working on it!

tofuahdude 5y ago

How does middleware work when using a CDN to host the JS bundles? ie what happens when I've already loaded the bundles and am transitioning to a page that has different middleware requirements? Is it a client-only middleware implementation? (I want this and have implemented a poor man's version in my _app.tsx).

emadabdulrahim 5y ago

What's the timeline on React Server components? It seems next 12 experimental feature of Server component is a very early look? Since React 18 is not out yet, and it's not planned to have Server component in that release.

leerob 5y ago
It's available to try today under an experimental flag. React 18 is still in alpha. We'd love to hear your feedback!

meowtimemania 5y ago

Can we still use obscure babel macros with the new Rust compiler? And if so, what do you think the future will look like for babel macros in a future where most build tooling is written in languages like rust/go?

capableweb 5y ago
> in a future where most build tooling is written in languages like rust/go You really think most of the build tooling will be written in other languages than JS? Compilers make sense, they are very CPU bound, but otherwise build tooling should also be accessible to modify to the developers working in the project, not just those who use Rust/Golang. And I'm sure we'll still use JS projects for some of the tooling.
- topspin 5y ago
  "You really think most of the build tooling will be written in other languages than JS?" Deno is using the same compiler (SWC) so there is data point number two on the question. esbuild is another...
leerob 5y ago
We're working on making it easier for developers to write Rust plugins to handle their own transformations.

leohonexus 5y ago

Is Next.js Live only available if the project is hosted on Vercel?

sudhirj 5y ago
No, it works fine with any static hosting system, like S3+CDN, Netlify or others. The API feature (FaaS) needs special server handling to run, but they're just Node functions, so other systems also add support. Vercel just has first class support where everything just works, but can you host it yourself.

julenx 5y ago

Also excited about the Rust compiler! Apologies if this is far from reality, but by looking at recent commits in GH[1] it looks as though this has been rushed for a v12 release, so I was wondering how much of internal testing has this been going through before pushing it to the broader public. [1] https://github.com/vercel/next.js/commits/canary https://github.com/vercel/next.js/commits/canary

vaughan 5y ago
The Rust compiler is just swc which has been around as another project for ages. Checkout it’s home page. Many people are using it.
- leerob 5y ago
  Yeah, Deno is using it as well!
  - devongovett 5y ago
    And Parcel: https://parceljs.org https://parceljs.org
leerob 5y ago
We've been testing SWC for months now, both with early community members on canary releases and with Vercel customers. Lots of the rushing at the end was for minification, which is opt-in because of this. But compilation with Rust (replacing Babel) is stable (which is why it's on by default).
- julenx 5y ago
  Thanks for clarifying, Lee!

throw123123123 5y ago

Hey Lee. I am not entirely sure how server-side components replace the dynamic/static balance next.js is now the market standard for. 1) Do the .server files require any special infrastructure for self hosted solutions? 2) If we move to ISR to a component level, would that mean that a page with multiple components will generate a backend-process thrash of multiple refreshes? (say 10 components, each with a revalidate 1 s) 3) Is there a good mapping to translate ISR to server side components from both UX and infrastructure/implementation?

leerob 5y ago
1. No, when self-hosted, server files will just run on your server :) 2. You can use the `keys` prop to prevent that (this is still very experimental and the API is not finalized). 3. We will be sharing more on this soon, but yeah still early days.

mcintyre1994 5y ago

How do you achieve no cold boots on edge functions? Is it the same approach as Cloudflare (https://blog.cloudflare.com/eliminating-cold-starts-with-cloudflare-workers/ https://blog.cloudflare.com/eliminating-cold-starts-with-clo...) or something else? Are there any tradeoffs to be aware of with your approach vs theirs if they're different?

leerob 5y ago
Vercel's Edge Functions are built on top of Cloudflare Workers. The runtime is designed for any similar provider, but we've chosen Cloudflare for now because they have an amazing product.
- mcintyre1994 5y ago
  Awesome!! Thanks for the answer :)
- mrahmadawais 5y ago
  Excellent decision!

atoko 5y ago

Are there any plans to address Bazel compatibility? I understand that the Next philosophy is very monolithic but so far I’m having trouble getting it to play nice with build tooling.

leerob 5y ago
We may investigate this more in the future, but nothing planned currently.

robertoandred 5y ago

Does Next 12 allow for getStaticProps() in _app.js?

leerob 5y ago
It does not, but with React Server Components, you can achieve the same result. https://nextjs.org/docs/advanced-features/react-18 https://nextjs.org/docs/advanced-features/react-18

yewenjie 5y ago

When can we expect the docs to be updated?

leerob 5y ago
They are now updated! Sorry for that. The NPM release took a bit longer than expected.

kylehotchkiss 5y ago

Hey Lee! Loved the new features and your session on edge. One further-future question - would react server components ever be able to execute on the edge or will those always run from the datacenter you've deployed to? And regions - Cloudflare Workers offers 44 regions in North America and Vercel currently offers 4. Does your team have any plans to add some more edges around the world to bring the speed benefits closer to end users? Thanks to you and your teams incredible hard work on all the new features. Next.js has been a blast to use the past 5 years. Looking forward to the next 5!

leerob 5y ago
Yes, the Hacker News demo shown does run at the Edge (using Vercel Edge Functions) when deployed. If you self host, it would run on your server of choice. Vercel doesn't have 4 regions, we have 17 :)

svachalek 5y ago

I'm building a custom server (which hopefully now can be replaced with middleware?) which I build with tsc: $ tsc --strict --esModuleInterop --moduleResolution node --jsx react --outdir build server.ts node_modules/next/dist/server/config-shared.d.ts:1:15 - error TS2724: '"next/dist/compiled/webpack/webpack"' has no exported member named 'webpack5'. Did you mean 'webpack'? 1 import type { webpack5 } from 'next/dist/compiled/webpack/webpack'; ~~~~~~~~ Probably there's some workaround but the compile error seems legit. Is there something I can do about it until I figure out middleware?

theobr 5y ago
Webpack is no longer a dependency of Next.js - this was the big announcement about the compiler. You will have to opt out of the new SWC compiler (if this is an option atm)
- acemarke 5y ago
  That doesn't seem correct. Next _does_ still use Webpack - it's what does the actual bundling: > Underlying webpack improvements: We've made numerous improvements to webpack, including optimizing Fast Refresh and making on-demand entries more reliable. > After making webpack 5 the default in Next.js 11, we've now officially removed webpack 4. We've worked closely with the community to ensure a smooth transition to webpack 5. SWC is the equivalent of Babel for transpiling JS, not Webpack for bundling.

leotaku 5y ago

I'm personally curious how the Next is able to achieve the claim of "zero client-side JavaScript" mentioned here[1] using react server components? It just doesn't seem to make sense to me, and the HN clone example and my barebones test project also clearly still load about 74.2 KB of JavaScript. Is the claim supposed to mean that the server components won't require additional JS, or maybe that they won't need to execute any client-side JS to be fully rendered? [1]: https://nextjs.org/docs/advanced-features/react-18#react-server-components https://nextjs.org/docs/advanced-features/react-18#react-ser...

agrunyan 5y ago
Seems he missed your question, which I’m also curious about.
robertrbairdii 5y ago
From my understanding from watching the keynote earlier today, the reason that demo has JS is that repo opted in to have client side code to handle the upvote functionality. If it didn't require that interactivity it could be shipped with no client side JS. The client side js code is defined in the component files ending in .client.js https://github.com/vercel/next-rsc-demo/tree/main/components https://github.com/vercel/next-rsc-demo/tree/main/components
k__ 5y ago
Also, does "no client-side JS" also work with Cloudflare Workers?
krall12 5y ago
I think it means that any page that only renders server components can just push the built html to the browser. If there were to be client components, like an upvote button, react would be required for that to hydrate the DOM. It’s very similar to what Astro is doing. Only adding the JS if it’s actually necessary.
leerob 5y ago
You can read more here on the original RSC announcement: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html https://reactjs.org/blog/2020/12/21/data-fetching-with-react.... RSC are still experimental, and as mentioned, this demo has some client-side functionality (upvotes).

techpression 5y ago

Any chance we’ll get a proper official routing mechanic that doesn’t rely on the file system and magical file names?

dev-3892 5y ago

The module federation story was a bit complicated pre-webpack 5. Are there plans in the roadmap to further support module federation?