23 ms·

Next.js 11

262 points by jacobwg 5y ago

rawtxapp 5y ago
For the interested they are having a conference right now [1]. 1: https://www.youtube.com/watch?v=ze8ycxc1UzE https://www.youtube.com/watch?v=ze8ycxc1UzE
PaywallBuster 5y ago
Do they maintain old releases? for how long? can't find any information about it
- thangngoc89 5y ago
  They don’t. Next.js uses the same release methods of React.js. If the previous major version doesn’t give you any warnings, you can upgrade without any modifications. You can check upgrade guide here: https://nextjs.org/docs/upgrading https://nextjs.org/docs/upgrading
- yepthatsreality 5y ago
  No one maintains anything in JS world. You just upgrade or hop to the next framework. The ES spec I believe discusses backwards compatibility but that only applies at the language level. It wouldn’t be the cool hip framework if it had to commit resources to older versions.
  - juancampa 5y ago
    Nodejs, arguably a big part of the "JS-world", has LTS https://nodejs.org/en/about/releases/ https://nodejs.org/en/about/releases/
    - trutannus 5y ago
      This is node itself, not libraries or frameworks.
      - yepthatsreality 5y ago
        You’re downvoted because Node is considered a framework. So while you’re not technically correct, I think your response is still valid as “I caught your drift”.
  - throwthere 5y ago
    You're not wrong but there's probably a nicer way to say it.
    - yepthatsreality 5y ago
      Honestly it’s the last line that gets me the downvotes (oh no downvotes!) and this was intended. I think being brash about it is a good way to take a look at where the world can improve.
mvanaltvorst 5y ago
Great to see reduced cumulative layout shift in image tags! Next.js seems to be the only modern JS framework with accessibility by default. Still wishing i18n would work with `next export`, though.
codetheweb 5y ago
Really happy to see blur placeholders and automatic dimension detection of local sources being added to the Image component.
wicked_gazelle 5y ago
Amazing work on these built-in/opt-in performance, accessibility, UX and DX features!
timomeh 5y ago
This whole conference could have been an email.
- dbbk 5y ago
  Well to be fair at least it was only 20 minutes. But yes, I don't really see the point in the whole Apple-like video production.
- williamstein 5y ago
  The interesting and useful part of the conference (to me) was the live video chat and Q/A with the 7 devs after the polished video, which is still going on right now.
  - TechBro8615 5y ago
    That sounds cool! But on their YouTube I only see the 24 minute keynote. Do you have a link to this Q/A?
    - styfle 5y ago
      https://www.youtube.com/watch?v=ANikp1R8zX8 https://www.youtube.com/watch?v=ANikp1R8zX8
damsta 5y ago
Really solid release, congrats to the team and contributors! P.S. I have noticed that you put a markdown link as `src` prop value in the first `Script` example.
r6203 5y ago
Still no option to export a static site when using next/image without relying on 3rd party services, right? The only option that comes to my mind is using Vercel to host the site but then every image is transformed on demand which results in horrendous loading times. Is this really how „everyone“ uses Next when exporting static sites?
- quaffapint 5y ago
  That's why I removed next/image and ended up using https://github.com/cyrilwanner/next-optimized-images https://github.com/cyrilwanner/next-optimized-images That lets you export the images pre-optimized for different sizes/etc. You can then do a normal next export.
  - steve_adams_86 5y ago
    This works well for us too. It doesn't have all the conveniences of next/image, but it lets you get closer to more reliable and better performance in our experience. Yes you need to understand what you're doing a little better, but it isn't rocket science.
  - lucas_codes 5y ago
    Unfortunately it doesn't seem to be maintained anymore.
- nickdandakis 5y ago
  Also disappointed by this. Vercel has increasingly been putting out more features that are tucked behind a vendor-lock. - `next export` when using `next/image` doesn't have a sane default - Running a custom server means no deploying to Vercel. I understand that one the most, since Vercel has decided to lean on serverless - Next.js Live can only run on Vercel I still reach for Next.js + React first when starting a new web project, but have since replaced Vercel with Render because more times than not, I need to run something that just doesn't work on serverless. Been a user and fan since v1.0.0, and have only just started noticing some features that go against the "sane defaults, config available" ethos that seems to be core to the team. No hate, just observations.
andrewmcwatters 5y ago
> Since Next.js 10, we've been obsessed with further improving the developer experience of Next.js. In 10.1 and 10.2 we improved startup time by up to 24% and shaved off another 40% of processing time for changes through React Fast Refresh. You've been getting these amazing speed improvements just by keeping Next.js updated. I know they think this is good marketing, but it absolutely does not inspire confidence. Why was it so slow to begin with? Why would someone who’s never used Next.js want to use it after reading this? Too many JavaScript projects talk about how much faster they’re getting or how “blazing” fast they are. I don’t think these people know what “fast” is.
- smt88 5y ago
  Most of the time savings of a modern JS framework are in thinking/coding/researching phases, not "waiting for my build to finish". Even for a big site, startup time is not important at all if you have hot reloading.
  - noahtallen 5y ago
    I disagree, start up time is still very useful to improve if developers only interact with your project maybe once a week. It’s also very handy if you’re doing CD, as your entire build pipeline will finish more quickly, which makes reverts and deploys faster. It’s also good for quick bug fixes, where something needs to be fixed as quickly as possible. It can make a big difference on big sites, from like 10 minutes to 1 or 2 minutes.
- todd3834 5y ago
  Do you feel the same way when Apple releases a new chip that is X% faster? For many people: complete + iteration > optimized with less functionality
- TechBro8615 5y ago
  So basically your argument is: - JavaScript is too slow - Too many JavaScript projects try to not be slow Am I getting this right?
hyuuu 5y ago
what is the next.js sanctioned way to handle css in js?
- williamstein 5y ago
  I think it's explained here: https://nextjs.org/docs/basic-features/built-in-css-support https://nextjs.org/docs/basic-features/built-in-css-support Basically strong encouragement and support for CSS modules, but some other escape hatches and approaches are supported.
vincentmarle 5y ago
I've only very recently heard of Next.js, what is the ideal use case for it?
- dbbk 5y ago
  If you have a simple marketing or brochure site, and want to use React, it’s pretty much a no brainer. Anything more complicated eg a dashboard app, you’re going to be fighting it a lot.
  - thesandlord 5y ago
    I do not agree with that assessment at all. Next.js is great for making SPAs and full web apps. I've made three (profitable) projects with Next.js and never felt like I had to fight it
    - dbbk 5y ago
      Really? I've made multiple attempts and always get stuck as soon as you have nested layouts or routes, which dashboards nearly always do (with master/detail views for instance).
      - dfabulich 5y ago
        "Nested layouts" just sounds like nested React components. React is kinda weird… you have to do subcomponents the "React way" and I think a lot of folks struggle with that; it can feel like fighting. But I don't think Next makes that any easier or harder. I don't know what you mean by "nested routes." Routes are just URLs that map to files. You can create a directory with files, and, uh, subdirectories with files, if you want…?
        jamil7 5y ago
        I’m guessing they mean pieces of state based on urls, like which tab is active here or is a modal open or closed kind of thing.
myth_drannon 5y ago
I see Next.js being pushed into areas where is shouldn't be used. And I mean like data heavy enterprise web apps. Probably in a year or two these projects will collapse under the heavy maintenance burden and will start seeing a lot of unearned negativity towards Next.JS
- striking 5y ago
  I use it without SSR, just because it's a well-known and very well-maintained set of configs. Having to upgrade webpack et al. up major versions sucks.
  - dinkleberg 5y ago
    I’m doing the same, it is the easiest out of the box react setup I’ve encountered. The nice thing is on a current project I found there was one view where SSR made my life a lot easier and since everything was in place for it all I had to do was chuck in an extra function.
  - MrSaints 5y ago
    +1 for this. The great thing is you still have the option to incrementally opt for SSR and/or enriching statically generated pages with build-time data.
- Marciplan 5y ago
  Isnt that what happened to Gatsby oO
  - BoumTAC 5y ago
    isn't that what happened with every js framework ? 99% of all js project would have been better with an old school framework (Rails/Symfony/Django/laravel, and any other framework I forgot the name)
    - jstummbillig 5y ago
      Next excels in frontend grease, a place where the ssr frameworks do not venture. I so agree that next is not the ultimate answer. Still waiting for the absolute best of both worlds.
chris_engel 5y ago
Partial hydration would have been a game changer in performance of nextJS based websites. I am a bit perplexed about the new "live" feature. Its just so far away from the framework business (poof, now its an IDE), I have no words for it...
- steve_adams_86 5y ago
  I agree. I was a little disappointed to see resources going towards this. It feels like they're seeking ways to create vendor lock-in, which my team fairly aggressively avoids. Next has generally been great about this, and part of the initial appeal. It's just React components inside of an easy-to-understand framework. This, though - my instinct is to stay away from it, personally. It doesn't seem to be their wheelhouse and it doesn't necessarily make Next.js better.
  - leerob 5y ago
    Next.js Live will have a completely redesigned open-source dev server, which anyone can use to create collaboration features on top – no lock in. This server has been overhauled to run entirely in the browser, using technology like ES Modules, Service Workers, and WebAssembly.
    - dbbk 5y ago
      It sounds like it's removing Webpack from the equation, but how would that work if you have a custom setup with loaders etc?
  - chatmasta 5y ago
    I had this same reaction to next/image. I see where they're going with it though. They're obviously prioritizing e-commerce publishers because they tend to have high traffic, semi-static content, and a clear business use case for fast websites. They are also the most likely to pay Vercel to host their sites. As long as features like next/image and "live" remain opt-in and don't otherwise affect build/dev times, I have no problem with Vercel targeting a lucrative market. Anyone who relies on Next should want Vercel to be a long-lasting company. Besides, this is the first release of "live" – I can see this workflow becoming appealing to marketing and design teams. It's good practice to separate your marketing website from your application, so why not use "live" to enable non-devs to edit it? That's what Jamstack is all about – empowering the marketing/copywriting/product teams to edit content in real time. Maybe "live" is simply the next logical step of Jamstack – teams of non-devs editing the code and design of websites as easily as they can edit their content. Developers should be all for that, even if they aren't the target audience of the live features. Reducing friction between dev and non-dev is a win for everybody. Marketers are happy because they can edit content without waiting on devs/deploys, and devs are happy because they talked the non-devs out of using WordPress, and got to build a new site with a hot technology. I wonder if Vercel considers Automattic a competitor. The "percent of the web" stat is a juicy KPI to compete for.
dang 5y ago
Related ongoing thread: Next.js Live: Code in the Browser with ESM, ServiceWorkers, Replicache, and WASM - https://news.ycombinator.com/item?id=27517440 https://news.ycombinator.com/item?id=27517440 - June 2021 (23 comments)

262 points by jacobwg 5y ago

For the interested they are having a conference right now [1]. 1: https://www.youtube.com/watch?v=ze8ycxc1UzE https://www.youtube.com/watch?v=ze8ycxc1UzE

PaywallBuster 5y ago

Do they maintain old releases? for how long? can't find any information about it

thangngoc89 5y ago
They don’t. Next.js uses the same release methods of React.js. If the previous major version doesn’t give you any warnings, you can upgrade without any modifications. You can check upgrade guide here: https://nextjs.org/docs/upgrading https://nextjs.org/docs/upgrading
yepthatsreality 5y ago
No one maintains anything in JS world. You just upgrade or hop to the next framework. The ES spec I believe discusses backwards compatibility but that only applies at the language level. It wouldn’t be the cool hip framework if it had to commit resources to older versions.
- juancampa 5y ago
  Nodejs, arguably a big part of the "JS-world", has LTS https://nodejs.org/en/about/releases/ https://nodejs.org/en/about/releases/
  - trutannus 5y ago
    This is node itself, not libraries or frameworks.
    - yepthatsreality 5y ago
      You’re downvoted because Node is considered a framework. So while you’re not technically correct, I think your response is still valid as “I caught your drift”.
- throwthere 5y ago
  You're not wrong but there's probably a nicer way to say it.
  - yepthatsreality 5y ago
    Honestly it’s the last line that gets me the downvotes (oh no downvotes!) and this was intended. I think being brash about it is a good way to take a look at where the world can improve.

mvanaltvorst 5y ago

Great to see reduced cumulative layout shift in image tags! Next.js seems to be the only modern JS framework with accessibility by default. Still wishing i18n would work with `next export`, though.

codetheweb 5y ago

Really happy to see blur placeholders and automatic dimension detection of local sources being added to the Image component.

wicked_gazelle 5y ago

Amazing work on these built-in/opt-in performance, accessibility, UX and DX features!

timomeh 5y ago

This whole conference could have been an email.

dbbk 5y ago
Well to be fair at least it was only 20 minutes. But yes, I don't really see the point in the whole Apple-like video production.
williamstein 5y ago
The interesting and useful part of the conference (to me) was the live video chat and Q/A with the 7 devs after the polished video, which is still going on right now.
- TechBro8615 5y ago
  That sounds cool! But on their YouTube I only see the 24 minute keynote. Do you have a link to this Q/A?
  - styfle 5y ago
    https://www.youtube.com/watch?v=ANikp1R8zX8 https://www.youtube.com/watch?v=ANikp1R8zX8

damsta 5y ago

Really solid release, congrats to the team and contributors! P.S. I have noticed that you put a markdown link as `src` prop value in the first `Script` example.

r6203 5y ago

Still no option to export a static site when using next/image without relying on 3rd party services, right? The only option that comes to my mind is using Vercel to host the site but then every image is transformed on demand which results in horrendous loading times. Is this really how „everyone“ uses Next when exporting static sites?

quaffapint 5y ago
That's why I removed next/image and ended up using https://github.com/cyrilwanner/next-optimized-images https://github.com/cyrilwanner/next-optimized-images That lets you export the images pre-optimized for different sizes/etc. You can then do a normal next export.
- steve_adams_86 5y ago
  This works well for us too. It doesn't have all the conveniences of next/image, but it lets you get closer to more reliable and better performance in our experience. Yes you need to understand what you're doing a little better, but it isn't rocket science.
- lucas_codes 5y ago
  Unfortunately it doesn't seem to be maintained anymore.
nickdandakis 5y ago
Also disappointed by this. Vercel has increasingly been putting out more features that are tucked behind a vendor-lock. - `next export` when using `next/image` doesn't have a sane default - Running a custom server means no deploying to Vercel. I understand that one the most, since Vercel has decided to lean on serverless - Next.js Live can only run on Vercel I still reach for Next.js + React first when starting a new web project, but have since replaced Vercel with Render because more times than not, I need to run something that just doesn't work on serverless. Been a user and fan since v1.0.0, and have only just started noticing some features that go against the "sane defaults, config available" ethos that seems to be core to the team. No hate, just observations.

andrewmcwatters 5y ago

> Since Next.js 10, we've been obsessed with further improving the developer experience of Next.js. In 10.1 and 10.2 we improved startup time by up to 24% and shaved off another 40% of processing time for changes through React Fast Refresh. You've been getting these amazing speed improvements just by keeping Next.js updated. I know they think this is good marketing, but it absolutely does not inspire confidence. Why was it so slow to begin with? Why would someone who’s never used Next.js want to use it after reading this? Too many JavaScript projects talk about how much faster they’re getting or how “blazing” fast they are. I don’t think these people know what “fast” is.

smt88 5y ago
Most of the time savings of a modern JS framework are in thinking/coding/researching phases, not "waiting for my build to finish". Even for a big site, startup time is not important at all if you have hot reloading.
- noahtallen 5y ago
  I disagree, start up time is still very useful to improve if developers only interact with your project maybe once a week. It’s also very handy if you’re doing CD, as your entire build pipeline will finish more quickly, which makes reverts and deploys faster. It’s also good for quick bug fixes, where something needs to be fixed as quickly as possible. It can make a big difference on big sites, from like 10 minutes to 1 or 2 minutes.
todd3834 5y ago
Do you feel the same way when Apple releases a new chip that is X% faster? For many people: complete + iteration > optimized with less functionality
TechBro8615 5y ago
So basically your argument is: - JavaScript is too slow - Too many JavaScript projects try to not be slow Am I getting this right?

hyuuu 5y ago

what is the next.js sanctioned way to handle css in js?

williamstein 5y ago
I think it's explained here: https://nextjs.org/docs/basic-features/built-in-css-support https://nextjs.org/docs/basic-features/built-in-css-support Basically strong encouragement and support for CSS modules, but some other escape hatches and approaches are supported.

vincentmarle 5y ago

I've only very recently heard of Next.js, what is the ideal use case for it?

dbbk 5y ago
If you have a simple marketing or brochure site, and want to use React, it’s pretty much a no brainer. Anything more complicated eg a dashboard app, you’re going to be fighting it a lot.
- thesandlord 5y ago
  I do not agree with that assessment at all. Next.js is great for making SPAs and full web apps. I've made three (profitable) projects with Next.js and never felt like I had to fight it
  - dbbk 5y ago
    Really? I've made multiple attempts and always get stuck as soon as you have nested layouts or routes, which dashboards nearly always do (with master/detail views for instance).
    - dfabulich 5y ago
      "Nested layouts" just sounds like nested React components. React is kinda weird… you have to do subcomponents the "React way" and I think a lot of folks struggle with that; it can feel like fighting. But I don't think Next makes that any easier or harder. I don't know what you mean by "nested routes." Routes are just URLs that map to files. You can create a directory with files, and, uh, subdirectories with files, if you want…?
      - jamil7 5y ago
        I’m guessing they mean pieces of state based on urls, like which tab is active here or is a modal open or closed kind of thing.

myth_drannon 5y ago

I see Next.js being pushed into areas where is shouldn't be used. And I mean like data heavy enterprise web apps. Probably in a year or two these projects will collapse under the heavy maintenance burden and will start seeing a lot of unearned negativity towards Next.JS

striking 5y ago
I use it without SSR, just because it's a well-known and very well-maintained set of configs. Having to upgrade webpack et al. up major versions sucks.
- dinkleberg 5y ago
  I’m doing the same, it is the easiest out of the box react setup I’ve encountered. The nice thing is on a current project I found there was one view where SSR made my life a lot easier and since everything was in place for it all I had to do was chuck in an extra function.
- MrSaints 5y ago
  +1 for this. The great thing is you still have the option to incrementally opt for SSR and/or enriching statically generated pages with build-time data.
Marciplan 5y ago
Isnt that what happened to Gatsby oO
- BoumTAC 5y ago
  isn't that what happened with every js framework ? 99% of all js project would have been better with an old school framework (Rails/Symfony/Django/laravel, and any other framework I forgot the name)
  - jstummbillig 5y ago
    Next excels in frontend grease, a place where the ssr frameworks do not venture. I so agree that next is not the ultimate answer. Still waiting for the absolute best of both worlds.

chris_engel 5y ago

Partial hydration would have been a game changer in performance of nextJS based websites. I am a bit perplexed about the new "live" feature. Its just so far away from the framework business (poof, now its an IDE), I have no words for it...

steve_adams_86 5y ago
I agree. I was a little disappointed to see resources going towards this. It feels like they're seeking ways to create vendor lock-in, which my team fairly aggressively avoids. Next has generally been great about this, and part of the initial appeal. It's just React components inside of an easy-to-understand framework. This, though - my instinct is to stay away from it, personally. It doesn't seem to be their wheelhouse and it doesn't necessarily make Next.js better.
- leerob 5y ago
  Next.js Live will have a completely redesigned open-source dev server, which anyone can use to create collaboration features on top – no lock in. This server has been overhauled to run entirely in the browser, using technology like ES Modules, Service Workers, and WebAssembly.
  - dbbk 5y ago
    It sounds like it's removing Webpack from the equation, but how would that work if you have a custom setup with loaders etc?
- chatmasta 5y ago
  I had this same reaction to next/image. I see where they're going with it though. They're obviously prioritizing e-commerce publishers because they tend to have high traffic, semi-static content, and a clear business use case for fast websites. They are also the most likely to pay Vercel to host their sites. As long as features like next/image and "live" remain opt-in and don't otherwise affect build/dev times, I have no problem with Vercel targeting a lucrative market. Anyone who relies on Next should want Vercel to be a long-lasting company. Besides, this is the first release of "live" – I can see this workflow becoming appealing to marketing and design teams. It's good practice to separate your marketing website from your application, so why not use "live" to enable non-devs to edit it? That's what Jamstack is all about – empowering the marketing/copywriting/product teams to edit content in real time. Maybe "live" is simply the next logical step of Jamstack – teams of non-devs editing the code and design of websites as easily as they can edit their content. Developers should be all for that, even if they aren't the target audience of the live features. Reducing friction between dev and non-dev is a win for everybody. Marketers are happy because they can edit content without waiting on devs/deploys, and devs are happy because they talked the non-devs out of using WordPress, and got to build a new site with a hot technology. I wonder if Vercel considers Automattic a competitor. The "percent of the web" stat is a juicy KPI to compete for.

dang 5y ago

Related ongoing thread: Next.js Live: Code in the Browser with ESM, ServiceWorkers, Replicache, and WASM - https://news.ycombinator.com/item?id=27517440 https://news.ycombinator.com/item?id=27517440 - June 2021 (23 comments)