14 ms·

Next.js 10

340 points by ihuman 6y ago

ihuman 6y ago
They're talking about all the changes right now in Next.js Conf's keynote: https://www.youtube.com/watch?v=1-NzQ9ObsfM https://www.youtube.com/watch?v=1-NzQ9ObsfM
vvoyer 6y ago
Highlights (live from keynote): - On-demand image optimization, lazy loading, via an Image component (responsive sizes, formats) - Internationalization support (routing via domain or subpath) - Next.js analytics. Automated performance testing and tracking https://nextjs.org/analytics https://nextjs.org/analytics - Next.js commerce. Starter kit for high-performance ecommerce https://nextjs.org/commerce https://nextjs.org/commerce Blog post: https://nextjs.org/blog/next-10 https://nextjs.org/blog/next-10 Full changelog: https://github.com/vercel/next.js/releases/tag/v10.0.0 https://github.com/vercel/next.js/releases/tag/v10.0.0
- peter_l_downs 6y ago
  Am I missing the part of the analytics docs / announcement where they mention how to send that information to anywhere other than Vercel? EDIT: described here in "web vitals" https://nextjs.org/docs/advanced-features/measuring-performance#web-vitals https://nextjs.org/docs/advanced-features/measuring-performa...
  - deleted 6y ago
    [deleted]
kissgyorgy 6y ago
There is an online Next.js conference right now: https://nextjs.org/conf/stage/n https://nextjs.org/conf/stage/n
chaostheory 6y ago
It's nice to see that Next has Typescript support. No matter how nice a framework looks, it's a deal breaker when there's no TS support. It's just too hard dealing with a large Javascript code base.
- agustif 6y ago
  Yeah and it's first citizen too, it was upgraded from needing a @zeit/plugin to working from scratch in a new nextjs project. Just add a pages/index.tsx, and run yarn dev, and next will create a default sensible tsconfig.json file for you and run the project!
aloukissas 6y ago
Prediction: Google buys Vercel, kills Angular, steps further into e-commerce
- HendrikR 6y ago
  … and people would look into https://svelte.dev https://svelte.dev which might be everything you need.
  - ampdepolymerase 6y ago
    They don't have enough funding. Next.js and Gatsby are in an entirely different weight class compared to Sapper. https://sapper.svelte.dev/ https://sapper.svelte.dev/
    - pier25 6y ago
      And... Sapper is dead btw. Rich said it recently in a video. The Svelte team is working on the next big thing combining Svelte with Snowpack. The project is called SvelteKit. https://www.youtube.com/watch?v=qSfdtmcZ4d0 https://www.youtube.com/watch?v=qSfdtmcZ4d0
      - hitekker 6y ago
        I think retiring Sapper was the right decision. I have a feeling Rollup will meet a similar end too. They both seemed like fine pieces of software. They just don't seem offer separate much their counterparts nowadays that warrants continued feature development.
        rich_harris 6y ago
        Rollup isn't going anywhere! When you poke behind the scenes of newer build tools, like Snowpack and Vite and the custom compiler that powers Remix Run, you'll find Rollup doing a lot of the heavy lifting. And it's the preferred choice of most libraries. There's a reason for that :)
flak48 6y ago
Is support for nested routes going to be added any time soon? If I don't want a full page reload when clicking a new tab for example? Or if I want to implement the age old header, sidebar main content layout without importing the header/sidebar in all my routes/components? I'm aware there are hacks to get around this but would be nice if the standard next router supported nested routing with persistent layouts for those who need it : https://github.com/vercel/next.js/issues/8193 https://github.com/vercel/next.js/issues/8193
pier25 6y ago
The big elephant in the room most of these frameworks are missing is partial hydration. Instead of hydrating the whole page, only the interactive parts are hydrated, sending the absolutely minimal JS needed to the client. AFAIK only Marko has this feature today. Since it's developed and used at Ebay they focused on the best SSR+hydration experience from the start. Imba v2 will also have patial hydration (confirmed by the devs here on HN). Other than those two, it seems nobody is really taking partial/progressive/lazy hydration seriously. IMO SSR+partial hydration is really the next frontier in web development. It's possible to do it yourself (I did it recently with a Svelte project) but it results in complicated setups. We need a solution that does it transparently, extracting the needed components and data automatically.
- ampdepolymerase 6y ago
  It is coming soon. https://github.com/vercel/next.js/issues/10344 https://github.com/vercel/next.js/issues/10344
  - hirako2000 6y ago
    I think it's coming not soon based on the last comment of this issue.
  - pier25 6y ago
    It's not. That issue is closed and the last comment says: > Overall it’s currently not possible to do this besides following what’s described in the article. Definitely something we plan on tackling eventually!
- sophiebits 6y ago
  The React team is working on some experiments that’s not quite what you’re describing but achieves the goal of sending way less code to the client. I can’t wait until tools like that are more standard.
  - pier25 6y ago
    There is light at the end of the SPA tunnel :)
airstrike 6y ago
As someone who only really built websites using jQuery / custom vanilla js and good ole CSS2, this stuff feels completely alien to me
- deft 6y ago
  Same. I mean I understand how it works but I ask myself what's the point every time. I've looked into react and I hate how it works and I hate how every 2 months people are begging for some new optimization because its slow and sucks. Then version 5000 is released and fixes that slowdown, but every react site I've ever used is still buggy and slow as hell.
  - archarios 6y ago
    *laughs in modern web development
  - jmondi 6y ago
    > but every react site I've ever used is still buggy and slow as hell This is just as asinine as saying "every Ruby on Rails site I've ever used is still buggy and slow as hell". No, every terribly coded site youve used is slow as hell.
    - fraktl 6y ago
      Which means that React attracts people who aren't really developers but they want to jump in on the hype train, right?
      - edgyquant 6y ago
        No. People have said this about every web framework since PHP5 and its not true. Web development does tend to favor fast iteration which can lead to problems if the tech debt compounds but that doesn’t mean the people aren’t developers, at all.
        6y ago
fareesh 6y ago
Does Next.js do pre-rendering, i.e. if I have a store with 500 products, will it pre-render the HTML (photos, etc.) for all 500 products and serve it as a static request? Or will it assemble the template on the server, send it down to the client and then do some amount of interactivity hydration later on during the page load? What if my store has multicurrency / multilingual versions of all these 500 pages - will it pre-render all of these combinations? I haven't used a JS framework with server-side rendering in a while - but from what I remember it seemed to add a terribly high TTFB to the overall page load, which negatively impacted SEO. As a result we abandoned SSR based frameworks completely and just went with minimal JS on the client and pre-rendered all the pages on the server as HTMLs which loaded pretty much instantly. Most of the time when I see the "new hotness" being advertised, there don't really seem to be any specifics that tackle advanced use-cases so it's difficult to accurately assess whether the technology is worth serious consideration
- mathnovice 6y ago
  > if I have a store with 500 products, will it pre-render the HTML (photos, etc.) for all 500 products and serve it as a static request? You can set it up to retrieve all 500 products and render the html on the server. > What if my store has multicurrency / multilingual versions of all these 500 pages - will it pre-render all of these combinations? The server is making all the requests that would have been made on the frontend. So if the server knew the locale of the user it could presumably load the correct currency and language.
- chrisco255 6y ago
  Next.js can do both pre-rendering (static output) and dynamic server-side rendering. I can't speak to your questions about internationalization though.
- ryanto 6y ago
  yes, next will prerender everything. you should give it a try.
- rory 6y ago
  It _can_ prerender all of those combinations. Here is a directory I made with 1000+ pages, prerendered and hosted for free on netlify: https://www.givepuppylove.com/organizations/ https://www.givepuppylove.com/organizations/ . I've found that single digit thousands is about the maximum you can currently have and keep build times reasonable. If you want to recognize the user's location and display the appropriate currency or language, you would probably want to wrap content dependent on location in a "ClientOnly" type component. So it would not be prerendered in that case. Example code: export default function ClientOnly({ children, ...delegated }) { const [hasMounted, setHasMounted] = useState(false) useEffect(() => { setHasMounted(true) }, []) return hasMounted ? <div {...delegated}>{children}</div> : <div></div> } This allows you to grab things off the "window" and change behavior based on that info, which you can't do with prerendering.
sergiomattei 6y ago
I can't believe NextJS still doesn't have named routes, resorting to hacks like next-routes or next-named-routes to have a semblance of sanity managing links throughout larger apps. Also, doing things like /@[username] is still a huge hack, unsupported.
- deleted 6y ago
  [deleted]
- ihuman 6y ago
  It looks like both of those packages are used for creating dynamic routes with named parameters. Nextjs supports this already. Is that what you meant by "named routes", or is that something different? https://nextjs.org/docs/routing/dynamic-routes https://nextjs.org/docs/routing/dynamic-routes
athenot 6y ago
I'm not sure if they are dogfooding their own framework, but it's annoying that the cards on the home page won't even let you select their content without going straight to a different page. It's a subtle breakage of `a href` behavior but I see that on a lot of sites where I'd like to copy a value and instead an action fires off when I don't want to.
- tofuahdude 6y ago
  Its worth pointing out that Next does not provide react components like cards - that is a separate implementation and just not a part of next.js.
- zackkrida 6y ago
  this seems to have less to do with Next.js and is more of a design decision. Each card has a native anchor tag inside, and when you tab through these links the card is ignored and the links are focused. The card itself is a 'fake' js link, that redirects when clicked. i personally would've made the entire card an anchor link, but either approach is possible in Next.js
x87678r 6y ago
I tried nextjs because I thought it would be a good way to learn React but I found it really confusing. Is it really better to master React first then try nextjs?
- gkilmain 6y ago
  A solid understanding of React is helpful. Mastery of React completely unnecessary.
- mulholio 6y ago
  I think create-react-app is much more beginner friendly. Fewer concepts to learn. Rolling your own or using script tags to begin with is also an option (see this course for an example: https://egghead.io/courses/the-beginner-s-guide-to-react https://egghead.io/courses/the-beginner-s-guide-to-react)
  - revicon 6y ago
    And create-react-app would be all I would ever need except that SEO on single page apps that don't have data loaded upon load really sucks compared to server side rendered pages. Is there a way to build a site using create-react-app and enable server side rendering without implementing a whole other framework like Nextjs?
    - jerrycruncher 6y ago
      We used React Router's ssr process described here[1] on my last React project. It worked ok, but there's a bit of hoop-jumping to go through if your pages are populated by async data. [1] https://reactrouter.com/web/guides/server-rendering https://reactrouter.com/web/guides/server-rendering
    - mulholio 6y ago
      Next.js really isn't that bad. If you need SSR, it is definitely the best way to go.
- jerrycruncher 6y ago
boltefnovor 6y ago
I’m not a fan of these frameworks. They add another giant layer of stuff to learn and understand. I’d rather just program react and the browser instead of hoping some framework will do it all for me.
- gkilmain 6y ago
  Have you tried writing a sample project? It took me a few tries to really understand the problem that these framework solve.
- archarios 6y ago
  When you're working on a larger scale (be that app complexity or number of users) these things make more sense.
- cyral 6y ago
  Next really doesn’t add a giant layer of anything, it’s almost vanilla React aside from their own routing and the server side functions (which you can start out not using)
pbowyer 6y ago
> Nowadays users browse the web using their phones, tablets, and laptops, yet images are still as a one size fits all. For example: sites load a 2000 by 2000 pixel image, but phones are only displaying it as 100 by 100 pixels. That's what srcset & <source> were invented for. > Furthermore, 30% of images on web pages are outside of the initial viewport, meaning the browser loads images that a user does not see until they scroll further down the page. That's why we now have a loading=lazy HTML attribute > When using the next/image component, images are automatically lazy-loaded, meaning they're only rendered when the user is close to seeing the image. This prevents loading that 30% of images outside of the initial viewport. This has been done many times before. For images outside the viewport it's great; for images which are in the viewport, the browser isn't able to discover the image until the JS has loaded and decided which image size to fetch. In my experience this slows down the overall rendering of the page. I see the Google Chrome team was involved in creating this component so I'd like to know what's different this time, because they have the data. > Developers can mark images that are in the initial viewport, allowing Next.js to automatically preload these images. Preloading images in the initial viewport has shown improvements to the Largest Contentful Paint by up to 50%. How can smart preloading work when the image size isn't known until the JS component runs? If we're back to loading the 2000px image then we're losing a lot of optimization. If they're relying on client hints [1] then we can get as far as an image as wide as the browser window width, but no more - at the price of poor browser compatibility. Preloading also has its own costs, as it messes with the browser's prioritization of page content. I've found it easy to prioritize something you know is essential and unintentionally increase load time metrics. 1. https://caniuse.com/client-hints-dpr-width-viewport https://caniuse.com/client-hints-dpr-width-viewport
- ritchiea 6y ago
  Is srcset commonly used? I am not familiar with it but I'm more full stack than frontend and often feel like front end moves faster than I can keep up with.
  - drdaeman 6y ago
    I don't know about its popularity, but it works as advertised and my company had used it. What's more important is that it's a correct solution for the problem (unless old browser support is required).
truesy 6y ago
I have mixed emotions on this framework. If you're doing a simple project, Next is the best around. Also great for marketing pages, etc. But if you have a more sophisticated app, with an API, page routes that need to toggle based on cookies, etc, then you have to integrate something like Express. I've done this several times with Next, and it just doesn't pay off. I've also tried to use it at work, but it changes rapidly, and it'd be too much to expect engineers who aren't keeping up with everything on the clientside to know what to do. I feel like there's a need for something between roll-your-own and what vercel is offering.
- o_____________o 6y ago
  Why do you have to integrate with Express? Genuinely asking – that wasn't my impression.
  - jayflux 6y ago
    I think he means if you want to offer React server side you will need some-sort of web framework to serve it. Usually that's Express or Fastify or something like that.
    - makeee 6y ago
      Next.js does server-rendering and has API routes built-in. No need for Express or Fastify unless you like the DX of those frameworks better.
      - jayflux 6y ago
        The Parent parent was talking about if you don’t use Next and want a more sophisticated setup then then those are alternatives. The parent then asked why do you need to integrate [react] with Express and my answer was if you want to do server side (not using Next)
        randomchars 6y ago
Jugurtha 6y ago
Looks cool. The scope this asks for in GitLab is too much (everything): This application will be able to: Access the authenticated user's API Grants complete read/write access to the API, including all groups and projects, the container registry, and the package registry.
droptablemain 6y ago
I've been almost exclusively working with NextJS for front-end stuff in 2020. It just keeps getting better and better.
TheMagicHorsey 6y ago
Am I the only developer that feels that React ... and perhaps the whole web paradigm ... is about the worst way to think about and develop client GUIs? After using Google's new Flutter framework (which is built to develop cross platform apps: iOS, Android, Web, embedded) I felt like I had my eyes open. The structure seems so much more logical and easy to navigate. The Web (and React) paradigm of putting some code in HTML, some in CSS, and then some in JS, just seems like a step backwards to me after using Flutter where everything is just code. Designers build in Adobe XD or Figma, and then they hit export, and it dumps out FLutter code that a developer can directly read and incorporate into her project. There isn't a bewildering array of different things all being processed by different other things ... dumping out yet more things. Its just code to binary ... that's it. And that's another thing ... I like the code to binary direct link. React Native's JS logic + bridge to native always seemed like such an inefficient shim. And seeing the framerate of widgets in Flutter its pretty clear we have been leaving some performance on the table for the convenience of making everything in Javascript. Having said that, I'm sure Flutter on the web is as bulky as any other JS framework, as there it has to run on JS/HTML/CSS like everyone else.
- fuzzy2 6y ago
  React doesn't have HTML templates though…? You can also have CSS-in-JS if you really want.
  - TheMagicHorsey 6y ago
    Whatever it's called ... JSX ... fact is you have to dive out of javascript to describe your UI in a different syntax, that's the point.
    - fuzzy2 6y ago
      It’s still not HTML. It’s just syntactic sugar for function calls. You don’t have to use it either way; you can just call `React.createElement` directly if you don’t like JSX.
- eyelidlessness 6y ago
bamazizi 6y ago
I understand this is a Vercel framework and probably a great distribution channel for new business and increasing overall revenue. But, I'm a bit disappointed the "next" version is more about Vercel's own internal business agenda. Promoted as amazing "DX" is not really true. It had a better DX compared to the other tools, that's why it grew so popular, but not seeing anything real DX related in version "10". Other tools are starting to do things a bit better. Analytics, great idea, is a huge disappointment. It's just a Vercel thing and not NextJS, not to mention a "pro/enterprise" paid feature, not cheap either. A few days ago I saw the YT videos of "future of Svelte" and that video was really about "DX" with no non-sense no BS that just focused on the real next evolution on web/app dev. That DX really resonated with me. My opinion, I'm not sold on NextJS 10, the "commercial" move kind of turned me off and scares me of platform lock-in, but I'm getting more and more interested into Svelte (v4?) and I'm seriously looking to switch to it from NextJS. Note: "DX" stands for "Developer eXperience", meaning how joyful, easy it is to get started with the tool and feeling productive.
- suyash 6y ago
  Good point it would have helped if the clearly mention what's in the open source vs what's paid service tied to Vercel. Alsi I'd like a point by point comparison with Google Analytics for their analytics offering, is that in open source?
- erokar 6y ago
  I feel the same way. We've switched from React to Svelte at work. Going back to React would be a step backwards for us, so much feels needlessly overengineered with awkward APIs. React was a great improvement on Angular, but luckily things are still moving forward.
  - fasteo 6y ago
    Which UI component library, if any, do you use with Svelte ?
    - bamazizi 6y ago
robertoandred 6y ago
I've never really trusted these image auto-optimizers. I always just do it my hand so I know what's actually happening.
- eyelidlessness 6y ago
  The problem with doing something like that manually is that it’s painful at scale, and easy to forget. If scale isn't an issue, sure roll your own. But for my uses, I’m more likely to use tooling as a default, preview, then override when the preview doesn’t do what I want/expect.
deltron3030 6y ago
Kinda suprised they didn't do digital commerce first. Ecommerce and selling physiscal products is such a pain in comparison which won't go a way with a storefront.
desireco42 6y ago
OK, so definitely my mind is blown with stuff they did. NextJS is great tool and focus on shopping and using that as a use case to improve your whole framework is fantastic. I also love youth that I see in the team, I am a little bit older :). Like others here, I am impressed with Svelte and trying to find how and where to use it. We live in great time where we are showered with amazing tools for development. Having said that, for more traditional, ReactJS scenarios, NextJS is pretty much without competition (even though there is plenty). New features with localization and image optimization are fantastic and allow next level of mobile websites. If we are ever to break Apple/Google monopoly on appstore, this is a way to do it. I think analytics package is solid addition and if you don't want to pay, you don't have to use it, it is for commercial projects. Anyhow, I am really impressed with features they did and how it is integrated into their platform. Not huge fan of Vercel name still :) but it is great platform.
neves 6y ago
In Vercel page they tout: "Developers love Next.js, the open source React framework Vercel built together with Google and Facebook". Did Google quit Angular and is using React now?
- sophiebits 6y ago
  Google does a lot of different things. In this case, it’s part of the Chrome team that has been focusing on this and how to help the web dev ecosystem more broadly.
sandGorgon 6y ago
Nextjs has the dejavu vibe of docker. It is a brilliant framework dragged slowly and inexorably into "platform lock-in". Nextjs has defocused on SSR (which was the original selling point of a server side Reactjs). And all the other cool features only run on Vercel. It is getting next to impossible to deploy Nextjs (with all its features) on GAE for example...or heroku. There are other alternatives to Nextjs that are emerging with true developer fit - think databases,etc. Svelte, etc are pretty cool
- Vinnl 6y ago
  Doesn't it still come with a server that you can just run on Heroku? That's what I'm doing, and although I'm not at v10 yet, I can't recall any major challenges there.
  - sandGorgon 6y ago
    All the server side parts are now deeply linked to Vercel microservices infrastructure. As a static site, nextjs is probably a little bit more complex than gatsbyjs (with its zillions of fantastic themes)
    - Vinnl 6y ago
      Is it though? Do you mean that running `next build; next start` as described at [1] no longer works? [1] https://nextjs.org/docs/deployment#nodejs-server https://nextjs.org/docs/deployment#nodejs-server
- siquick 6y ago
  Vercel is great at getting out of the way of deployments and just working. But I've deployed Next apps to Linux servers on AWS, GC, DO and it wasn't much more involved that a standard Node deployment - Next with Elastic Beanstalk is pretty straight forward too.
holoduke 6y ago
Why are all these frameworks so big. Compiling, boiler plating, templating, huge API's etc. I just want a real component framework where i can have something like: <script> include "MyComponentFramework.js" page = new Page(); panel = new Panel(); button = new Button().addCssClass("buttonclass"); Page.addComponent(panel) panel.addComponent(button) button.bind('click',function(){ panel.addComponent(someComponent); panel.rerender(); } </script> I will use something like bootstrap for css. My backend can be anything. UI is just fetching data via API's I really don't like templating and compiling on the frontend. It makes the development process slow.
- vosper 6y ago
  Seems like you're asking for UI components (page, panel, button) that you can just use? This isn't the problem Next is trying to solve. You might be better off with something like MaterialUI, Ant, Bootstrap, of any of the many other batteries-included UI frameworks. Or I guess Web Components were supposed to solve this problem, too, but I think they missed their window.
- eyelidlessness 6y ago
  Basically what your example is describing is jQuery with some functions wrapped around some stuff. Sure, if you want to write a ton of imperative code, you can do that, but people who have been building UIs on the web for a couple decades have been down that road and have collectively determined it’s a nightmare.
- acoard 6y ago
  The main thing this is missing is HTML. Sure, you can use bootstrap across the project, but components need to have their custom CSS too. If you added HTML (or really JSX, but same thing more or less), it might look like: <script> include "MyComponentFramework.js" page = new Page(); function handleClick() { panel.addComponent(someComponent); panel.rerender(); } return <panel> <button on-click=handleClick className="buttonclass"> </panel> </script> At this point, honestly you're not far off from Nextjs. Instead of callinig `new Page()` you'd create a file in `pages/my-page-name.js`.
seanwilson 6y ago
Can anyone compare this to something like Hugo or Jekyll? Why is the more complex JavaScript build chain worth it?
- dgb23 6y ago
  In short With Next you control when things are rendered: SSG/SSR/CSR, so you get much more flexibility and can cover more use-cases. And it is React based, which is a huge plus, especially if you adhere to a modern style.
  - seanwilson 6y ago
    What use cases does that cover though that Hugo and Jekyll can't? For landing pages and typical business websites for example, some basic ways to create reusable snippets of HTML feel enough for me. I don't want to have to deal with a lot of React, SPA stuff and JavaScript build issues unless it's really worth it.
    - hydroxideOH- 6y ago
      Next with static rendering (or Gatsby, which I find horribly over complicated) are alternatives to Hugo and Jekyll. If you already know React, they are pretty easy to set up since they handle all the webpack/babel stuff for you, so you shouldn't have Javascript build issues. When statically rendered, React is mostly just an alternative templating language.
robinduckett 6y ago
I find it funny that even though it's been reported a number of times, the NextJS routing system is still flawed Try it on their own site: https://nextjs.org/index https://nextjs.org/index Resulting in duplicate content to https://nextjs.org/ https://nextjs.org/ Maybe duplicate content isn't a problem with modern SEO - but it's a problem for my workflow and is potentially one reason why NextJS won't be on my list for any new projects.
- charrondev 6y ago
  Cant you just set a canonical URL meta tag? It’s very common for content to be available through multiple urls. (Eg, have a numeric ID and a slug in the URL. Any slug is valid in case of renames, but the ID is the relevant identifier).
l0b0 6y ago
Their very first release was v1.0.0 [1]; four years later they are at v10. It's official, v10 is the new v1.0. [1] https://github.com/vercel/next.js/releases?after=1.0.2 https://github.com/vercel/next.js/releases?after=1.0.2
guykdm 6y ago
The new image solution is strictly more powerful than anything currently offered. Since they also control the initial rendering of the HTML, they can seamlessly opt to embed an image via a data url.

340 points by ihuman 6y ago

They're talking about all the changes right now in Next.js Conf's keynote: https://www.youtube.com/watch?v=1-NzQ9ObsfM https://www.youtube.com/watch?v=1-NzQ9ObsfM

vvoyer 6y ago

Highlights (live from keynote): - On-demand image optimization, lazy loading, via an Image component (responsive sizes, formats) - Internationalization support (routing via domain or subpath) - Next.js analytics. Automated performance testing and tracking https://nextjs.org/analytics https://nextjs.org/analytics - Next.js commerce. Starter kit for high-performance ecommerce https://nextjs.org/commerce https://nextjs.org/commerce Blog post: https://nextjs.org/blog/next-10 https://nextjs.org/blog/next-10 Full changelog: https://github.com/vercel/next.js/releases/tag/v10.0.0 https://github.com/vercel/next.js/releases/tag/v10.0.0

peter_l_downs 6y ago
Am I missing the part of the analytics docs / announcement where they mention how to send that information to anywhere other than Vercel? EDIT: described here in "web vitals" https://nextjs.org/docs/advanced-features/measuring-performance#web-vitals https://nextjs.org/docs/advanced-features/measuring-performa...
- deleted 6y ago
  [deleted]

kissgyorgy 6y ago

There is an online Next.js conference right now: https://nextjs.org/conf/stage/n https://nextjs.org/conf/stage/n

chaostheory 6y ago

It's nice to see that Next has Typescript support. No matter how nice a framework looks, it's a deal breaker when there's no TS support. It's just too hard dealing with a large Javascript code base.

agustif 6y ago
Yeah and it's first citizen too, it was upgraded from needing a @zeit/plugin to working from scratch in a new nextjs project. Just add a pages/index.tsx, and run yarn dev, and next will create a default sensible tsconfig.json file for you and run the project!

aloukissas 6y ago

Prediction: Google buys Vercel, kills Angular, steps further into e-commerce

HendrikR 6y ago
… and people would look into https://svelte.dev https://svelte.dev which might be everything you need.
- ampdepolymerase 6y ago
  They don't have enough funding. Next.js and Gatsby are in an entirely different weight class compared to Sapper. https://sapper.svelte.dev/ https://sapper.svelte.dev/
  - pier25 6y ago
    And... Sapper is dead btw. Rich said it recently in a video. The Svelte team is working on the next big thing combining Svelte with Snowpack. The project is called SvelteKit. https://www.youtube.com/watch?v=qSfdtmcZ4d0 https://www.youtube.com/watch?v=qSfdtmcZ4d0
    - hitekker 6y ago
      I think retiring Sapper was the right decision. I have a feeling Rollup will meet a similar end too. They both seemed like fine pieces of software. They just don't seem offer separate much their counterparts nowadays that warrants continued feature development.
      - rich_harris 6y ago
        Rollup isn't going anywhere! When you poke behind the scenes of newer build tools, like Snowpack and Vite and the custom compiler that powers Remix Run, you'll find Rollup doing a lot of the heavy lifting. And it's the preferred choice of most libraries. There's a reason for that :)

flak48 6y ago

Is support for nested routes going to be added any time soon? If I don't want a full page reload when clicking a new tab for example? Or if I want to implement the age old header, sidebar main content layout without importing the header/sidebar in all my routes/components? I'm aware there are hacks to get around this but would be nice if the standard next router supported nested routing with persistent layouts for those who need it : https://github.com/vercel/next.js/issues/8193 https://github.com/vercel/next.js/issues/8193

pier25 6y ago

The big elephant in the room most of these frameworks are missing is partial hydration. Instead of hydrating the whole page, only the interactive parts are hydrated, sending the absolutely minimal JS needed to the client. AFAIK only Marko has this feature today. Since it's developed and used at Ebay they focused on the best SSR+hydration experience from the start. Imba v2 will also have patial hydration (confirmed by the devs here on HN). Other than those two, it seems nobody is really taking partial/progressive/lazy hydration seriously. IMO SSR+partial hydration is really the next frontier in web development. It's possible to do it yourself (I did it recently with a Svelte project) but it results in complicated setups. We need a solution that does it transparently, extracting the needed components and data automatically.

ampdepolymerase 6y ago
It is coming soon. https://github.com/vercel/next.js/issues/10344 https://github.com/vercel/next.js/issues/10344
- hirako2000 6y ago
  I think it's coming not soon based on the last comment of this issue.
- pier25 6y ago
  It's not. That issue is closed and the last comment says: > Overall it’s currently not possible to do this besides following what’s described in the article. Definitely something we plan on tackling eventually!
sophiebits 6y ago
The React team is working on some experiments that’s not quite what you’re describing but achieves the goal of sending way less code to the client. I can’t wait until tools like that are more standard.
- pier25 6y ago
  There is light at the end of the SPA tunnel :)

airstrike 6y ago

As someone who only really built websites using jQuery / custom vanilla js and good ole CSS2, this stuff feels completely alien to me

deft 6y ago
Same. I mean I understand how it works but I ask myself what's the point every time. I've looked into react and I hate how it works and I hate how every 2 months people are begging for some new optimization because its slow and sucks. Then version 5000 is released and fixes that slowdown, but every react site I've ever used is still buggy and slow as hell.
- archarios 6y ago
  *laughs in modern web development
- jmondi 6y ago
  > but every react site I've ever used is still buggy and slow as hell This is just as asinine as saying "every Ruby on Rails site I've ever used is still buggy and slow as hell". No, every terribly coded site youve used is slow as hell.
  - fraktl 6y ago
    Which means that React attracts people who aren't really developers but they want to jump in on the hype train, right?
    - edgyquant 6y ago
      No. People have said this about every web framework since PHP5 and its not true. Web development does tend to favor fast iteration which can lead to problems if the tech debt compounds but that doesn’t mean the people aren’t developers, at all.
      - 6y ago

fareesh 6y ago

Does Next.js do pre-rendering, i.e. if I have a store with 500 products, will it pre-render the HTML (photos, etc.) for all 500 products and serve it as a static request? Or will it assemble the template on the server, send it down to the client and then do some amount of interactivity hydration later on during the page load? What if my store has multicurrency / multilingual versions of all these 500 pages - will it pre-render all of these combinations? I haven't used a JS framework with server-side rendering in a while - but from what I remember it seemed to add a terribly high TTFB to the overall page load, which negatively impacted SEO. As a result we abandoned SSR based frameworks completely and just went with minimal JS on the client and pre-rendered all the pages on the server as HTMLs which loaded pretty much instantly. Most of the time when I see the "new hotness" being advertised, there don't really seem to be any specifics that tackle advanced use-cases so it's difficult to accurately assess whether the technology is worth serious consideration

mathnovice 6y ago
> if I have a store with 500 products, will it pre-render the HTML (photos, etc.) for all 500 products and serve it as a static request? You can set it up to retrieve all 500 products and render the html on the server. > What if my store has multicurrency / multilingual versions of all these 500 pages - will it pre-render all of these combinations? The server is making all the requests that would have been made on the frontend. So if the server knew the locale of the user it could presumably load the correct currency and language.
chrisco255 6y ago
Next.js can do both pre-rendering (static output) and dynamic server-side rendering. I can't speak to your questions about internationalization though.
ryanto 6y ago
yes, next will prerender everything. you should give it a try.
rory 6y ago
It _can_ prerender all of those combinations. Here is a directory I made with 1000+ pages, prerendered and hosted for free on netlify: https://www.givepuppylove.com/organizations/ https://www.givepuppylove.com/organizations/ . I've found that single digit thousands is about the maximum you can currently have and keep build times reasonable. If you want to recognize the user's location and display the appropriate currency or language, you would probably want to wrap content dependent on location in a "ClientOnly" type component. So it would not be prerendered in that case. Example code: export default function ClientOnly({ children, ...delegated }) { const [hasMounted, setHasMounted] = useState(false) useEffect(() => { setHasMounted(true) }, []) return hasMounted ? <div {...delegated}>{children}</div> : <div></div> } This allows you to grab things off the "window" and change behavior based on that info, which you can't do with prerendering.

sergiomattei 6y ago

I can't believe NextJS still doesn't have named routes, resorting to hacks like next-routes or next-named-routes to have a semblance of sanity managing links throughout larger apps. Also, doing things like /@[username] is still a huge hack, unsupported.

deleted 6y ago
[deleted]
ihuman 6y ago
It looks like both of those packages are used for creating dynamic routes with named parameters. Nextjs supports this already. Is that what you meant by "named routes", or is that something different? https://nextjs.org/docs/routing/dynamic-routes https://nextjs.org/docs/routing/dynamic-routes

athenot 6y ago

I'm not sure if they are dogfooding their own framework, but it's annoying that the cards on the home page won't even let you select their content without going straight to a different page. It's a subtle breakage of `a href` behavior but I see that on a lot of sites where I'd like to copy a value and instead an action fires off when I don't want to.

tofuahdude 6y ago
Its worth pointing out that Next does not provide react components like cards - that is a separate implementation and just not a part of next.js.
zackkrida 6y ago
this seems to have less to do with Next.js and is more of a design decision. Each card has a native anchor tag inside, and when you tab through these links the card is ignored and the links are focused. The card itself is a 'fake' js link, that redirects when clicked. i personally would've made the entire card an anchor link, but either approach is possible in Next.js

x87678r 6y ago

I tried nextjs because I thought it would be a good way to learn React but I found it really confusing. Is it really better to master React first then try nextjs?

gkilmain 6y ago
A solid understanding of React is helpful. Mastery of React completely unnecessary.
mulholio 6y ago
I think create-react-app is much more beginner friendly. Fewer concepts to learn. Rolling your own or using script tags to begin with is also an option (see this course for an example: https://egghead.io/courses/the-beginner-s-guide-to-react https://egghead.io/courses/the-beginner-s-guide-to-react)
- revicon 6y ago
  And create-react-app would be all I would ever need except that SEO on single page apps that don't have data loaded upon load really sucks compared to server side rendered pages. Is there a way to build a site using create-react-app and enable server side rendering without implementing a whole other framework like Nextjs?
  - jerrycruncher 6y ago
    We used React Router's ssr process described here[1] on my last React project. It worked ok, but there's a bit of hoop-jumping to go through if your pages are populated by async data. [1] https://reactrouter.com/web/guides/server-rendering https://reactrouter.com/web/guides/server-rendering
  - mulholio 6y ago
    Next.js really isn't that bad. If you need SSR, it is definitely the best way to go.
jerrycruncher 6y ago

boltefnovor 6y ago

I’m not a fan of these frameworks. They add another giant layer of stuff to learn and understand. I’d rather just program react and the browser instead of hoping some framework will do it all for me.

gkilmain 6y ago
Have you tried writing a sample project? It took me a few tries to really understand the problem that these framework solve.
archarios 6y ago
When you're working on a larger scale (be that app complexity or number of users) these things make more sense.
cyral 6y ago
Next really doesn’t add a giant layer of anything, it’s almost vanilla React aside from their own routing and the server side functions (which you can start out not using)

pbowyer 6y ago

> Nowadays users browse the web using their phones, tablets, and laptops, yet images are still as a one size fits all. For example: sites load a 2000 by 2000 pixel image, but phones are only displaying it as 100 by 100 pixels. That's what srcset & <source> were invented for. > Furthermore, 30% of images on web pages are outside of the initial viewport, meaning the browser loads images that a user does not see until they scroll further down the page. That's why we now have a loading=lazy HTML attribute > When using the next/image component, images are automatically lazy-loaded, meaning they're only rendered when the user is close to seeing the image. This prevents loading that 30% of images outside of the initial viewport. This has been done many times before. For images outside the viewport it's great; for images which are in the viewport, the browser isn't able to discover the image until the JS has loaded and decided which image size to fetch. In my experience this slows down the overall rendering of the page. I see the Google Chrome team was involved in creating this component so I'd like to know what's different this time, because they have the data. > Developers can mark images that are in the initial viewport, allowing Next.js to automatically preload these images. Preloading images in the initial viewport has shown improvements to the Largest Contentful Paint by up to 50%. How can smart preloading work when the image size isn't known until the JS component runs? If we're back to loading the 2000px image then we're losing a lot of optimization. If they're relying on client hints [1] then we can get as far as an image as wide as the browser window width, but no more - at the price of poor browser compatibility. Preloading also has its own costs, as it messes with the browser's prioritization of page content. I've found it easy to prioritize something you know is essential and unintentionally increase load time metrics. 1. https://caniuse.com/client-hints-dpr-width-viewport https://caniuse.com/client-hints-dpr-width-viewport

ritchiea 6y ago
Is srcset commonly used? I am not familiar with it but I'm more full stack than frontend and often feel like front end moves faster than I can keep up with.
- drdaeman 6y ago
  I don't know about its popularity, but it works as advertised and my company had used it. What's more important is that it's a correct solution for the problem (unless old browser support is required).

truesy 6y ago

I have mixed emotions on this framework. If you're doing a simple project, Next is the best around. Also great for marketing pages, etc. But if you have a more sophisticated app, with an API, page routes that need to toggle based on cookies, etc, then you have to integrate something like Express. I've done this several times with Next, and it just doesn't pay off. I've also tried to use it at work, but it changes rapidly, and it'd be too much to expect engineers who aren't keeping up with everything on the clientside to know what to do. I feel like there's a need for something between roll-your-own and what vercel is offering.

o_____________o 6y ago
Why do you have to integrate with Express? Genuinely asking – that wasn't my impression.
- jayflux 6y ago
  I think he means if you want to offer React server side you will need some-sort of web framework to serve it. Usually that's Express or Fastify or something like that.
  - makeee 6y ago
    Next.js does server-rendering and has API routes built-in. No need for Express or Fastify unless you like the DX of those frameworks better.
    - jayflux 6y ago
      The Parent parent was talking about if you don’t use Next and want a more sophisticated setup then then those are alternatives. The parent then asked why do you need to integrate [react] with Express and my answer was if you want to do server side (not using Next)
      - randomchars 6y ago

Jugurtha 6y ago

Looks cool. The scope this asks for in GitLab is too much (everything): This application will be able to: Access the authenticated user's API Grants complete read/write access to the API, including all groups and projects, the container registry, and the package registry.

droptablemain 6y ago

I've been almost exclusively working with NextJS for front-end stuff in 2020. It just keeps getting better and better.

TheMagicHorsey 6y ago

Am I the only developer that feels that React ... and perhaps the whole web paradigm ... is about the worst way to think about and develop client GUIs? After using Google's new Flutter framework (which is built to develop cross platform apps: iOS, Android, Web, embedded) I felt like I had my eyes open. The structure seems so much more logical and easy to navigate. The Web (and React) paradigm of putting some code in HTML, some in CSS, and then some in JS, just seems like a step backwards to me after using Flutter where everything is just code. Designers build in Adobe XD or Figma, and then they hit export, and it dumps out FLutter code that a developer can directly read and incorporate into her project. There isn't a bewildering array of different things all being processed by different other things ... dumping out yet more things. Its just code to binary ... that's it. And that's another thing ... I like the code to binary direct link. React Native's JS logic + bridge to native always seemed like such an inefficient shim. And seeing the framerate of widgets in Flutter its pretty clear we have been leaving some performance on the table for the convenience of making everything in Javascript. Having said that, I'm sure Flutter on the web is as bulky as any other JS framework, as there it has to run on JS/HTML/CSS like everyone else.

fuzzy2 6y ago
React doesn't have HTML templates though…? You can also have CSS-in-JS if you really want.
- TheMagicHorsey 6y ago
  Whatever it's called ... JSX ... fact is you have to dive out of javascript to describe your UI in a different syntax, that's the point.
  - fuzzy2 6y ago
    It’s still not HTML. It’s just syntactic sugar for function calls. You don’t have to use it either way; you can just call `React.createElement` directly if you don’t like JSX.
eyelidlessness 6y ago

bamazizi 6y ago

I understand this is a Vercel framework and probably a great distribution channel for new business and increasing overall revenue. But, I'm a bit disappointed the "next" version is more about Vercel's own internal business agenda. Promoted as amazing "DX" is not really true. It had a better DX compared to the other tools, that's why it grew so popular, but not seeing anything real DX related in version "10". Other tools are starting to do things a bit better. Analytics, great idea, is a huge disappointment. It's just a Vercel thing and not NextJS, not to mention a "pro/enterprise" paid feature, not cheap either. A few days ago I saw the YT videos of "future of Svelte" and that video was really about "DX" with no non-sense no BS that just focused on the real next evolution on web/app dev. That DX really resonated with me. My opinion, I'm not sold on NextJS 10, the "commercial" move kind of turned me off and scares me of platform lock-in, but I'm getting more and more interested into Svelte (v4?) and I'm seriously looking to switch to it from NextJS. Note: "DX" stands for "Developer eXperience", meaning how joyful, easy it is to get started with the tool and feeling productive.

suyash 6y ago
Good point it would have helped if the clearly mention what's in the open source vs what's paid service tied to Vercel. Alsi I'd like a point by point comparison with Google Analytics for their analytics offering, is that in open source?
erokar 6y ago
I feel the same way. We've switched from React to Svelte at work. Going back to React would be a step backwards for us, so much feels needlessly overengineered with awkward APIs. React was a great improvement on Angular, but luckily things are still moving forward.
- fasteo 6y ago
  Which UI component library, if any, do you use with Svelte ?
  - bamazizi 6y ago

robertoandred 6y ago

I've never really trusted these image auto-optimizers. I always just do it my hand so I know what's actually happening.

eyelidlessness 6y ago
The problem with doing something like that manually is that it’s painful at scale, and easy to forget. If scale isn't an issue, sure roll your own. But for my uses, I’m more likely to use tooling as a default, preview, then override when the preview doesn’t do what I want/expect.

deltron3030 6y ago

Kinda suprised they didn't do digital commerce first. Ecommerce and selling physiscal products is such a pain in comparison which won't go a way with a storefront.

desireco42 6y ago

OK, so definitely my mind is blown with stuff they did. NextJS is great tool and focus on shopping and using that as a use case to improve your whole framework is fantastic. I also love youth that I see in the team, I am a little bit older :). Like others here, I am impressed with Svelte and trying to find how and where to use it. We live in great time where we are showered with amazing tools for development. Having said that, for more traditional, ReactJS scenarios, NextJS is pretty much without competition (even though there is plenty). New features with localization and image optimization are fantastic and allow next level of mobile websites. If we are ever to break Apple/Google monopoly on appstore, this is a way to do it. I think analytics package is solid addition and if you don't want to pay, you don't have to use it, it is for commercial projects. Anyhow, I am really impressed with features they did and how it is integrated into their platform. Not huge fan of Vercel name still :) but it is great platform.

neves 6y ago

In Vercel page they tout: "Developers love Next.js, the open source React framework Vercel built together with Google and Facebook". Did Google quit Angular and is using React now?

sophiebits 6y ago
Google does a lot of different things. In this case, it’s part of the Chrome team that has been focusing on this and how to help the web dev ecosystem more broadly.

sandGorgon 6y ago

Nextjs has the dejavu vibe of docker. It is a brilliant framework dragged slowly and inexorably into "platform lock-in". Nextjs has defocused on SSR (which was the original selling point of a server side Reactjs). And all the other cool features only run on Vercel. It is getting next to impossible to deploy Nextjs (with all its features) on GAE for example...or heroku. There are other alternatives to Nextjs that are emerging with true developer fit - think databases,etc. Svelte, etc are pretty cool

Vinnl 6y ago
Doesn't it still come with a server that you can just run on Heroku? That's what I'm doing, and although I'm not at v10 yet, I can't recall any major challenges there.
- sandGorgon 6y ago
  All the server side parts are now deeply linked to Vercel microservices infrastructure. As a static site, nextjs is probably a little bit more complex than gatsbyjs (with its zillions of fantastic themes)
  - Vinnl 6y ago
    Is it though? Do you mean that running `next build; next start` as described at [1] no longer works? [1] https://nextjs.org/docs/deployment#nodejs-server https://nextjs.org/docs/deployment#nodejs-server
siquick 6y ago
Vercel is great at getting out of the way of deployments and just working. But I've deployed Next apps to Linux servers on AWS, GC, DO and it wasn't much more involved that a standard Node deployment - Next with Elastic Beanstalk is pretty straight forward too.

holoduke 6y ago

Why are all these frameworks so big. Compiling, boiler plating, templating, huge API's etc. I just want a real component framework where i can have something like: <script> include "MyComponentFramework.js" page = new Page(); panel = new Panel(); button = new Button().addCssClass("buttonclass"); Page.addComponent(panel) panel.addComponent(button) button.bind('click',function(){ panel.addComponent(someComponent); panel.rerender(); } </script> I will use something like bootstrap for css. My backend can be anything. UI is just fetching data via API's I really don't like templating and compiling on the frontend. It makes the development process slow.

vosper 6y ago
Seems like you're asking for UI components (page, panel, button) that you can just use? This isn't the problem Next is trying to solve. You might be better off with something like MaterialUI, Ant, Bootstrap, of any of the many other batteries-included UI frameworks. Or I guess Web Components were supposed to solve this problem, too, but I think they missed their window.
eyelidlessness 6y ago
Basically what your example is describing is jQuery with some functions wrapped around some stuff. Sure, if you want to write a ton of imperative code, you can do that, but people who have been building UIs on the web for a couple decades have been down that road and have collectively determined it’s a nightmare.
acoard 6y ago
The main thing this is missing is HTML. Sure, you can use bootstrap across the project, but components need to have their custom CSS too. If you added HTML (or really JSX, but same thing more or less), it might look like: <script> include "MyComponentFramework.js" page = new Page(); function handleClick() { panel.addComponent(someComponent); panel.rerender(); } return <panel> <button on-click=handleClick className="buttonclass"> </panel> </script> At this point, honestly you're not far off from Nextjs. Instead of callinig `new Page()` you'd create a file in `pages/my-page-name.js`.

seanwilson 6y ago

Can anyone compare this to something like Hugo or Jekyll? Why is the more complex JavaScript build chain worth it?

dgb23 6y ago
In short With Next you control when things are rendered: SSG/SSR/CSR, so you get much more flexibility and can cover more use-cases. And it is React based, which is a huge plus, especially if you adhere to a modern style.
- seanwilson 6y ago
  What use cases does that cover though that Hugo and Jekyll can't? For landing pages and typical business websites for example, some basic ways to create reusable snippets of HTML feel enough for me. I don't want to have to deal with a lot of React, SPA stuff and JavaScript build issues unless it's really worth it.
  - hydroxideOH- 6y ago
    Next with static rendering (or Gatsby, which I find horribly over complicated) are alternatives to Hugo and Jekyll. If you already know React, they are pretty easy to set up since they handle all the webpack/babel stuff for you, so you shouldn't have Javascript build issues. When statically rendered, React is mostly just an alternative templating language.

robinduckett 6y ago

I find it funny that even though it's been reported a number of times, the NextJS routing system is still flawed Try it on their own site: https://nextjs.org/index https://nextjs.org/index Resulting in duplicate content to https://nextjs.org/ https://nextjs.org/ Maybe duplicate content isn't a problem with modern SEO - but it's a problem for my workflow and is potentially one reason why NextJS won't be on my list for any new projects.

charrondev 6y ago
Cant you just set a canonical URL meta tag? It’s very common for content to be available through multiple urls. (Eg, have a numeric ID and a slug in the URL. Any slug is valid in case of renames, but the ID is the relevant identifier).

l0b0 6y ago

Their very first release was v1.0.0 [1]; four years later they are at v10. It's official, v10 is the new v1.0. [1] https://github.com/vercel/next.js/releases?after=1.0.2 https://github.com/vercel/next.js/releases?after=1.0.2

guykdm 6y ago

The new image solution is strictly more powerful than anything currently offered. Since they also control the initial rendering of the HTML, they can seamlessly opt to embed an image via a data url.