Next.js Conf – Afterparty

hey everyone thank you for attending nextgs conference and welcome to the next gs conference after party i'm lee and i'm the head of developer relations at burcell and we're really excited to have you here today to chat with our speakers chat with some special guests and learn more about all the exciting features and improvements in next.js 11 and also in next.js live for those of you who are joining in right now i'm just going to quickly summarize some of the things that we covered at the conference first off congratulations and thank you to all of our speakers who joined and did such an amazing job we really appreciate you at the conference we announced nextgs 11 which has a brand new conformant system with an esl integration we announced improvements to the nextgs image component which make it easier to use images by importing and referencing the source as well as blur up placeholders and that's just the start there's so much more that we're excited about with nextgs 11. go to nexus.org 11 to check it out and we also introduced next.js live mode which will drastically change how we build next.js applications by allowing you to code in the browser using cutting edge technology i'm really excited if you can't tell i'm very excited that you're all here for the after party and to get started i want to let everyone know the process we have a channel in discord called next.js conf after party questions um and you can ask questions there if you can hear my discord sound you can hear it pinging so ask questions there and we will be putting them into the chat and answering everything live so ask whatever you would like but to get started i would like to bring on our ceo hey thanks for having me this is incredible hey thank you so much for joining and joining us live and answering questions um the event was great you did a great job i loved everything that we announced yeah but uh before we get to questions i have uh something really exciting we have one more one more thing we're going to announce uh something very special you can go to nexchange.org slash give and this is a very special drop you can already see our button the draw party button underneath if you're on nexus.org and this is a a special drop that is benefiting women who code uh we'll have this special swag that you can just purchase all the proceeds go to great cause so yeah um very excited about the conference and very excited that we get to do this awesome thank you so much well before we dive into bringing the speakers on i just have one question to set the tone could you tell me more about what inspired next.js live because it's amazing and i'm really incredible about and excited about the future of nextgs for sure i think the thing that nexus has always been about is this awesomeness this performance this great developer experience that's that's our roots uh i fell in love with react when i saw what it was possible with um hot module replacement meaning you type you see your changes in real time but that was to me the single player version of react that we have the ability to make that multiplayer gets me extremely excited and i think the other side of it is not just react is the web right like the web has all this amazing technology for both consuming and editing at the same time we've all been able to you know go to a website go to the dev tools and make an edit so to me the web has always felt like this incredibly dynamic medium for creation as well as consumption so hopefully with next year's live we'll see a lot more of this creation on the web and i'm just really excited awesome well thank you for that and next i want to invite our speakers onto the stage and do some introductions so without further ado i will bring them on to the stage hey everyone we're really excited to have you here why don't we go around and do some introductions let's start with schuby hi everybody um john chubby i'm the tech lead and engineering manager of chrome's engagement with open source tools and frameworks we actually just published our blog post giving this initiative a name it is now called aurora please go check out web.slash aurora thanks awesome awesome hussein hi everyone my name is thane i am a developer relations engineer in the chrome team i've been working with shubi and a few others in the aurora initiative i've also been helping actually land conformance and es lantern xjs awesome and lydia hi i'm lydia uh i'm just an independent software engineer but i've been working with next for uh for years now and i'm pretty sure i'm not alone when i say that i'm always just blown away by marcel's announcement like even when you think that next can't get any better it's always better awesome well what we're going to do is we're going to go around and i have some questions just that i would like to ask you all and then we're also monitoring the discord for more questions from the community so to kick things off maybe we'll pass back to schube i can't you've been at google for over 10 years that's incredible um i would love to hear more about that journey and how google has changed since you've been there yeah i mean i guess the biggest thing that i think has changed is the ability to like keep up with what's going on around the company i remember back in the day we would all you know personally go to our friday tgif all hands and line to get the best seats and look forward to what larry and sergey had to kind of show i mean jokes they would crack but it's just impossible to keep up anymore and i think that's obviously what happens with growth that's awesome yeah that's a decade is a long time and it's been just an incredible development over those years so it's really really interesting to see that and hussain you've also been at google for i think what like three years is that accurate that's correct in a month it'll be coming up to three years now that's amazing i would love to hear more from your perspective about how google works with open source absolutely yeah so i can also just talk from a devral perspective um so a few many of us in the chrome and web team we try to work with many open source solutions we also try to make sure that we are you know telling developers what tools they can use how to they should use it the right way um and then schubi and a few others i think about a year two years ago we kind of realized okay we spent so much time telling developers what to do now we need to start focusing on improving the tools that they actually use and that's how aurora kind of kicked off and we've kind of worked very closely with the next.js team ever since and we've been expanding to other frameworks as well nice yeah it's what's interesting too is there's parallels to germo as well and our relationship with open source i'd love to hear more about how you envision versailles working with the open source community too and what that relationship looks like yeah for sure for me uh the entire company was born out of open source even personally my entire career has been born out of open source and i think for developers it's it's crucial that they get access to both the tool itself but the ability to influence the future of that tool so our process with adding any feature to xjs has always been about open rfcs listening to feedback engaging with developers on twitter on github on discord and really uh you know i um i just love just making the tool better as a response in to the feedback of users so that's primarily how we've been doing this always in the open and um the in terms of the relationship to the platform i've always seen it as a very naturally symbiotic relationship where you're making a tool that gives you a programming model and then you're creating a platform that optimizes for that programming model so in the case of an xjs a lot of what we've done is we've seen the transition in cloud from servers to serverless so we've had an opportunity to create a platform for front-end developers that just makes sense to them there are no knobs it scales everything scales automatically everything is fast out of the box we make a ton of optimizations that front-end developers don't really need to learn the guts of the cloud to do so when you focus on front-end i think a lot of the value comes from the infrastructure that you make invisible to teams that are creating incredible experiences on the web that want to publish and scale um and we'll continue to invest in this way so a lot of the things that we create with the nexus are open source themselves so we're going to make the conference we made the conference platform open source we're going to continue updating that make sure it's commerce commerce's open source and we'll continue to release more and more of these um examples over time yeah and i love that you talked about the community because lydia is opinion is really unique here because she's the boots on the ground engineer building these amazing nexus applications and you have a really unique perspective i mean you're a full-time you know remote nomadic engineer and correct me if i'm wrong but you also taught yourself how to code i would love to hear more about that journey because it's incredible yeah yeah i mean i've been working remotely for four years now um it all started kind of like after high school i didn't really know what to do and i was already programming and i didn't even know that it was like an actual career path um until people would like i mean you know like you can actually do this as a job as well and i went to like a quick boot camp to learn like react like the latest web development stuff in like 2016 so it was still like brand new back then um and i quickly got introduced to next yes i think like 2017 um but yeah like i've been working remotely for years now and like getting that valuable feedback from the people on your team has always been one of like the biggest struggles while working from home i feel like especially in the past year with covet so like next year's live is one of those things that i didn't even know like i needed until i heard about it and like i'm just so excited that people actually get to use it now it really shows that versailles always thinking like at least two steps ahead it's amazing a lot of the improvements we've made to the image component have came from direct feedback from the community so we're so grateful for everyone for giving us feedback and helping us improve that that's actually a great transition to bring on a few more people we have backstage that i would love to introduce alex and tim please welcome alex and tim and i'll let you both introduce yourself let's start with tim hey uh sound tim i lead the nexus team at uh for sale i've been at versailles for three years now and i've been contributing to next since pretty much the the early days like the first two months or so the project and uh later on join for sale to work on it awesome alex yeah hi everyone uh my name is alex uh i am a software engineer at google i work with shibuya hussein and i've been contributing to next uh for quite a bit now um mostly i have been looking uh at things having to do with images and the image component um which was has been something that i've been kind of um shepherding uh along uh since the since the beginning of the image component awesome yeah i wanted to bring you both on stage because we wanted to talk about images a little bit more we've been listening to your questions in the discord community and i actually have two pulled up here related to images the first one can we use an image tag to optimize background images the image component does not it's not a drop-in replacement for for background images but it should be able to be used uh to to achieve the same effect as whatever you're using a background image for the image component has a variety of layouts and one of the layouts is layout fill which uh just has the image uh stretch to fill whatever its containing element is um and in my experience i haven't yet found a situation where someone was using a background element that they could not um get the same do the same thing with the the image going in the layout fill it is a it's a little it's not just like you know changing the the name of the component you know it'll be a slightly different um if you do and if someone in the community does find one of those examples that's that's just uh something they can tell us and we'll work with them on always improving and i want to also call out there in terms of our collaboration with the open source community that um ever since we launched image we've been making lots of improvements based on the excellent feedback and we'll expect the same this time as well so try out image continue to use it and let us know how it goes awesome another question that i saw that i'd love to talk more about is just how the chrome team is working with nextgs to benefit that broader ecosystem should be or hussein or alex i would love to hear more about how you're working with frameworks like next and nux and angular and some of the interesting things coming yeah i'm happy to um take that one um yeah i mean overall um you know i just want to clarify our goals here like it's not exclusively to help next js right ultimately it is about uh promoting that broader ecosystem um yeah happy for husband and alex to jump in as well um so i'll point out so far uh our goal has been to use nexus to as a platform to prove out um sort of the ways that that we think that frameworks can do things um most performantly and in the best way they can and then to let that sort of diffuse out to the wider ecosystem and we've already seen a number of situations where other frameworks are adopting um work that we have contributed to next um or you know adapting it to their own to their own needs yeah and i want to chime in that like ultimately it's about supporting web developers using these open source stacks and so that's you know so that's our allegiance is to web developers and it's really about helping them achieve good ux outcomes and so we really see an opportunity here for building the gap between the platform and the frameworks towards helping them in this way and we've learned you know we said this in the in the talk we've learned lessons from google and one of those key lessons was you know using the tech stack and you working throughout that tech stack bringing strong defaults and opinionated tooling and next js nuxt and angular are tools that give us the service for bringing these opinions like it's not possible to create a font optimization for in a vacuum for all react apps or all new apps so this is what is possible now and we are hoping to establish a standard for both like new and existing frameworks uh towards what makes sense to support in frameworks by default you want to up that bar for me a good example there should be is i love the fact that i have to read a bunch of blog posts on font optimization and and i always look at the date is this 20 21 because the practices continue to evolve instead i can count on the framework embedding these best practices so it's a way of scaling the web a lot better and it's it's awesome i also wanted to add that a lot of what we learn especially at versailles we collaborate very closely with other framework creators because they adversely we support knox we support angular so for example we landed image optimization for next uh which is awesome so if you're using next or using next you get your images optimized at the edge so that's another great way to collaborate with open source that uh perhaps it's not as obvious in the beginning yeah and one one thing to uh to point out is like a good example is that uh alex spent months on figuring out what the right chunking mechanism is for javascript uh files uh which is eventually implemented in next as an experimental feature we have people try it out for quite some time eventually released it as stable to all nexus apps um all you had to do was upgrade it worked automatically um and later on that was adopted by a bunch of other frameworks and then even like webpack itself adopted it as well as the standard for web mac5 so if you're using like no even if you're not using next and you're using webpack by itself you already got these optimizations as well which game directly out of chibi's theme and alex's work thanks alex that was a lot of work i have another question from the community here about recently released react 18 and server components and when we can get that back into next js maybe tim wants to talk a little bit more about what we've done in next 11 for react 18 and what we'll do in the future yeah definitely so um next year that's react 18 uh direct 18 alpha is out so it's not um the actual release yet and uh they're working with library authors to make sure that all areas are compatible with react 18 before it becomes stable so that's good to note um i would definitely recommend to look at the react 18 blog post as well on react.js.org as that outlines the whole plan there but for the nexus side we implemented create root already if you're using the react 18 alpha you're going to use great root automatically has a few semantic differences with react 17 as is but it shouldn't uh break uh most apps um and we're going to be working towards uh implementing all the new features that react 18 enables so it's not even like react 18 by itself like enabling all these like new features for you to use immediately it's more so about giving you the building blocks to start adopting concurrent features like use transition and suspense and then next chest will neatly integrate with that and will have a uh like quite some time for your app to migrate um and even provide that compatibility so that you don't have to worry per se like at this point i want to make that very clear that you at this point don't have to worry about uh your app being compatible with react 18 uh immediately um but will be working towards like having experimental flags for example to use a new suspense based api as well and that's currently in the works so it's like i can't show it a exact example yet but it's going to allow us to implement a lot of really interesting new uh optimizations and next like uh partial hydration and um basically like partial iterations making sure that you don't load all the javascript uh needed for the whole app at the start of loading the app but also streaming rendering for example which will allow you to send like html faster to the browser once a request comes in uh and like all of these basically tie in together with the react server component uh demo that the react team gave uh and all of this will come neatly integrated into nexus in the near future i hope that answered the question yeah yeah yeah absolutely i'm extremely excited for server components in the future with react 18 big shout out to the react core team for doing an amazing job um one question that i had just about the conference in general the speakers did such an incredible job and their backgrounds and their setups were so amazing i would love to hear from any of the speakers on how that recording process was did you know did you stumble up did it go really smooth you all seem like naturals uh one thing i would say is it definitely took a lot of takes i think that's one thing i always emphasize and just in general when you want to make a very polished talk um but i was just so well amazed by how well and it was organized how well it was planned the setup um just doing the multiple tapes felt kind of natural after a while um so yeah no it was a great process and i think the brazil team did a great job yeah i had a cinderella moment coming back to my real office [Laughter] yeah it was done so professionally because like i was in san francisco but we made it seem like i was in amsterdam and it was the weirdest thing because there were like tulips we had dutch cookies which by the way tasted amazing and it was just like oh i wish this was my actual office but you know unfortunately i just have like a sofa that's my office a seat my main comment is i never make french press coffee although i do enjoy it so it's still it's still authentic um but yeah i i think the process is is part of the fun as well um not to get too corny but it's like a good experimental flag that gets iterated on for for many many takes until you have the final product uh so it's uh it's part of the the fun so so don't come at him with the the french press takes for the coffee people uh i have more questions from the community uh related to we have one around conformance how can we customize conformance to include or remove rules yeah so the way conformance is built out now if you do not have an eslint configuration set up in your application all you need to do is run excellent you'll have the commands there to just add any required packages and it's up and running and the default eslint config will already be set up but if you already have one and you or for any reason want to modify and make some rules stricter than they are or turn them off all you need to do is actually go into eslin config for any rules that you want extend the rules property and define them however you'd like um and the eslints documentation in xjs actually covers this pretty well yeah i guess one comment i have is um like ultimately it's about kind of you know as a team you know deciding what objectives you care about so that's why we kind of have that code by vitals as a rule set right so that's a priority i strongly recommend like buying into the entire room set if that's how you can achieve the loading performance absolutely yeah the idea is i think as developers you wouldn't need to worry about this you just follow the configuration we've set out for you but if for any reason you need to modify it you can but as to be mentioned we've kind of put some thought into what the rules should be for the best loading baseline i'll just quickly again shout out the two amazing blog posts that you have if people watching would like to learn more we have web dev aurora as well as web.dev slash conformance so go check those out if you would like to learn more about those efforts we have another question will there still be another nexus conference this fall so we know this was a special event can we share some news if there will be a next js conference this fall chairman yeah so this was just a special edition um our annual event will still happen and uh we have already are working on the amazing things that we're gonna announce so stay tuned uh i'm really really excited we uh we uh we have some sort of prizes still that are coming so um yeah literally tune in we have another question as well about nextjs oh about the create react app migration script that was released in nexus 11. so this is actually something that we didn't get a chance to talk about in the keynote but slipped in there so the community is wondering could we talk a little bit more about this migration script and how will it help me out as a create react app developer yeah i'll take that one i guess um yeah so we uh we basically like over the last few months and this is also in the blog post so we got a lot of requests from people basically like hey how do i migrate my free react app app to nexus uh if i already build it out or if i'm just getting started and i'm like used to building a react app app so what we did is we built a code mod for a complete uh great reactor app to convert those into a nexus app so it puts all the files in the right place and imports your like app file for example it strips out all the code that next does for you automatically like the react on the render and that kind of stuff um and then what it does is it basically um it does a lot of other like movements that you have to do generally yourself so like css uh into unscrap and that kind of stuff um and then what you get out of it is basically a um nexus app that runs exactly like three direct app app um and in order to achieve that we also uh added a new mode into next that you can enable uh for create reactive combat uh so generally like we don't recommend that for new apps but if you're moving from creator x app to next you can enable that mode so that some of the behaviors that we do for compilation are the same as what you get in uh create react app or very similar that does have a slight performance impact on your development uh life cycle but um for like moving your app that is generally fine um and what we've seen in general which is nice to note as well is that for all the apps that we've tested we've noticed that the development server and the production build are generally more optimized than the app was just as a create reaction app um so that there's a nice performance way in there by just running that script basically that converts it would be good to note also that it's currently experimental which means that we're still working on it we've tried that on many apps we're still looking for more so if your application had like you're building a create directive application you want to try migrating into next you can try to run that command we'll give you a link to provide feedback if it doesn't work and if you have an open source project please reach out to us as well as we'd love to run it on your project and try to figure out all these like edge cases where it doesn't work awesome thank you well i'm really excited about all the things that have been released in nextgs 11 i mean between image support being better and es lint integration conformance all these awesome things i would love to hear what others maybe favorite thing that's came out with 11 or just recently with nextgs and what they're excited to use i think we have a great group of people who have different experiences in different use cases like i would love to hear alex's take from you know even someone who's worked on the image component or maybe lydia's opinion being as you know the boots on the ground engineer who's going to take this back and apply some of these new features uh on their projects maybe start with alex what's your favorite thing you're excited about yeah um geez i feel like i ought to say something other than one of the things that i worked on but uh oh we'll focus on those lately um i really am looking forward to the new uh workflow around images i think the static uh image is a great way to when you're getting a new project off the ground you just want to get an image in there fast and you know perform it and in a way that is going to be easy to expand later on to to use more of the full features of the image component and i think that's that's a nice workflow um and also the uh the blurry placeholder i think is just a really exciting um feature and i like that it's gonna it's uh it i like that we've gotten the feature out there in a way that people are gonna gonna like using and then also once people have started using it we have a lot of leeway to make performance enhancements on on the back end to just keep making that feature better even in ways maybe who aren't are going to notice right away but then they'll see their performance get better over time and i think it's going to be a good platform going forward indeed what about you lydia i probably also have to say the image component is personally because it just makes my my own life so much easier you know there are so many ways in which you can optimize an app but you still have to kind of repeat the same process every time you're building an application and i just love that versailles takes so much away like so many small mistakes you could make but also i think it's more the mindset that i'm super excited about like nexus 11 really shows like how you know open source is the future and how much product can benefit from like the work of a greater community combined with the work and expertise from companies like like google like it's i'm just super excited for the future about like the web and you know like developer tooling in general after this announcement and it's just awesome to see like this innovation coming from you know like an open source and community driven company like like purcell it's uh i'm super excited awesome uh we do have a few questions i've just been monitoring about next.js live um maybe we could shift and talk about this a little bit how does nextgs live save the code that you edit um maybe you want to take this one yeah so one of the really cool things i mentioned briefly in the keynote is the technology that makes xjs live work is local first so you're always interacting directly with a web browser there's no remote uh computer that's running running your dev server it's basically using the browser to edit your project directly so this is made possible by all the recent innovations like service worker and and all the awesome new web apis like es modules so basically what we're doing is we're taking the source that can be loaded from any source really but even locally and then we're doing the least amount of work possible on top of that code to render it on the screen so as you're typing you're directly editing the live representation of that so live is an apt name for this technology but the other really cool thing is that we can broadcast those changes as they happen to other running instances of nexjs live in other people's web browsers so this is what makes a real-time collaboration possible now both the source or the origin of the code and the eventual output of the code can be anything so in the future we can even plug it right into your local text editor and then this patch changes to an xjslive url in real time and then when the changes are made in xjs live in real time we can send them over to the next step whether it's github whether it's a live deploy a live preview or even back into your editor so we're still working on all the integrations and all the things that are possible once you have this technology and and we encourage people to try it out give us feedback sign up for updates on nexus.org live if you leave your email we'll keep you posted on how this project evolves but overall it's just very exciting that we're sort of marrying this idea of local development with a real real-time collaboration of those uh of those changes that you made to your project and as a follow-up someone's asking if we have vs code embedded are they seeing that right is that monaco yeah so we do a lot to uh make this a seamless experience so we're pre-loading the editor behind the scenes and then when you press code we're basically running something that's quite close to your vs code copy uh that's obviously constrained to running uh well in the context of this collaboration so we're not anticipating that right of the bad you're going to go to nhs live and you're going to throw away all your all your existing tools but the editing experience is quite powerful obviously very real time faster in many ways so the fact that we're again reusing all these incredible web-based infrastructure so kudos obviously to the vs code and monaco teams in that we're all creating this reusable components for the web another example is we're using the replicash component it's a real-time engine that we use for synchronization it allows us to make local optimistic edits that as i mentioned can happen offline even and then can get reconciliated with a remote source we were able to leverage that component and anybody can also use that component in any context of any app we're using sucrase for manipulating the code as little as possible such that it's real time we measured changes from editor to screen and in even less than 10 milliseconds in many cases all of those components came together from the open source community and um it was just it's just a pleasure that the web has become so composable uh in a big part it also thinks of react that has given us this incredible and rich component model to to assemble pieces that are so complex but but deliver such a great experience that's amazing so much incredible open source work there that's helped contribute to that here's a good question does the new script tag have timing or interactive properties that can be set for lazy loading so waypoints are contextual views and modals so i think the larger question is how can i utilize lazy loading with the new script tag yeah i mean i have so many follow-up questions to that like and then to clarify the script loader is indented for third parties verbs so that's kind of really what it's meant for and we definitely started with the focus on initial loading and the reason for that is that that initial learning sequence is super critical to users even landing on pages because user abandonment is a big risk and so we really want to kind of safeguard that and so that's just the context in terms of like how we ended up creating the script component and it has these specific timings um relevant to you know like the application boot up and so that's what it's in real in relationship to um as opposed to like you know like lazy learning is more about like what's in the viewport so if there are good use cases though for third parties we will we're definitely open to supporting that and that's why i'm like i would love to learn more yeah i think we're gonna see so many developers take advantage of the script component to optimize performance in their applications and we're seeing other questions around people in the next year's community who really care about performance so any plans to include some kind of performance analytics or tracing and api routes maybe something like a new relic or a data dog to get more insight into how those api routes are performing tim maybe you could talk about this um yeah we're working on something uh but stay tuned i can't share too much here yeah so i can also kind of what what we're thinking about at a high level is um we we think that the debuggability and observability of nexxjs is an absolute top priority you should be able to understand very deeply where time is going this goes for example in builds we have very verbose logs obviously but we want to let developers even get deeper insight into okay like where's time going here i'm pre-rendering a page uh was i waiting on my cms or my headless e-commerce provider giving me the data or am i hitting some sort of concurrency limit and so on so there's that that we we're doing a lot of work to add more observability there more traces for apis as well so a lot of the feedback that we get is how can i you know debug once they've shipped and that's like the beauty of serverless functions for example in vircell is they're making your project more dynamic without shipping new code without doing static generation and things like that and that has a higher need for very deep observability so integrations with services like datadog we're working very very closely on but also even more observability out of the box with next js and versailles analytics another question on the image component everyone loves this does the image component have the ability to add custom image placeholders or does it use a blurred image alex maybe you could talk about how we actually generate that blurred image for the placeholder sure yeah i talked about how we generate it and also about what what it is right now the uh the image that's used as placeholder is a just a tiny image that then gets blown up and blurred to be used as placeholders so currently though you can provide your own tiny image which is what you need to do if you want to right now what you need to do if you want to integrate with a you know your own sort of remote image source um because the the blowing up and blurring is kind of built into the image right now you could not for instance provide like if you had a different sort of image if you want to use a colored square or something you can't do that right now um i will say that like i mentioned earlier i see the uh most parts the image component and especially the placeholder is kind of a platform to build on um i would i would love to hear feedback from the community and i can definitely see us adding other placeholder modes in the future and just generally building out use cases beyond what what is present right now which is blurry placeholders automatically generated for statically imported images or which you can provide yourself for uh dynamically imported or remote images nice thank you uh another somewhat related question so how does this new improvements to next image and how does the work being done with next script ultimately how do they help you get better seo better performance i would love to hear from hussein on you know with eslint and giving developers these tools to make better decisions and help put that guidance into the framework how can we then help get better performance better seo as the end result yeah i can definitely talk about this with context to like eslint and performance um so you know when we built out the whole conformance model we definitely focus on performance and and having the right actionable rules to make sure the app stays performant but we're also open to including rules that can help you know seo or any other things so one for example is if you place the title tag and using the wrong next head component will tell you to use the right one instead you know use it in the document page as opposed to per page level so i think that is kind of things that i think eslint will help um especially when developers are not too aware and they're using the wrong component for the wrong reasons yeah i want to jam in with like with you know google's recent announcement there is now a clear relationship between seo and you know metrics scored by vitals learning performance and so that also just gives us a very clear connection that doesn't mean that we don't you know we won't be adding uh other additional features supporting other things beyond like web vitals for seo there are many other aspects and definitely makes sense to support features for those and similarly for image i would say like it directly affects your lcd metric right and now there's a direct relationship with seo as well oh keep going keep going i just say for for anyone who's not fair lcp is the largest contentful paint um which is the main thing that we expect to see the image component help because uh for most sites or a lot of sites the uh the largest element on the page is an image i'll just quickly uh throw up a little banner here i believe it's web.dev vitals if you want to learn more about core web vitals so go check those out they're they're very important to help you understand how you can optimize performance in your application i'm personally really excited to try all these things out put them in vercell.com nextgs.org my personal apps and and make these applications as fast as possible i have a couple of related questions i'm gonna batch together um starting off with first off how do i get this next year's live url and what is going on with this code editing how is it synced and finally is this only a versaille thing yeah i'll start with the last because it kind of relates to the whole model that we're creating so the dev engine is just an xjs or as i mentioned in the keynote we're continuing to make xjs faster and we're we're expecting that the technology that powers and actually is live today which is it's quite experimental um it'll just be part of the nexus development server and open source engine that we have however um everything that you do locally with next live has to be synchronized somewhere at the end of the day and it has to go through the cloud and this is kind of the same model that we followed today with next and versailles which is you write your code with next and then you deploy it over cell very similar here you write code on top of the nxjs dev engine and then you basically synchronize and collaborate with burcell i think what's new and which is really exciting is that this is basically impossible before right like you you couldn't really collaborate it's an entire new real-time infrastructure um and uh we're very grateful that we're working with partners like replication figuring out how to do like really fast synchronization of code over the wire and things like that so the saving part i think is what's interesting is that once your cell has the code it can for example connect to your github integration so it kind of continues the normal route of any application deployment i would say the only difference here is that it's faster right like you get your code you see it live you can share it live a key component as well here is that once we save the changes that you make to the code they're immediately available so something i really liked about the keynote is that we show how when you refresh the live url that someone shares with you were basically loading the most recent version of that down to the last keystroke that was made seconds ago in under a second so we just load instantly so to alex's point the lcp of next live is really fast compared to you know imagine waiting for a long build so that you can share the progress or status of your project so that's one of the things that i'm most in love with is this idea of we save we save your your code change to the cloud really quick and then you can share instantly without waiting on a build awesome i like this question a lot because now as a full-time remote worker it's it's been a transformation for me and we have the community asking how many of you all work remotely i can speak for the versailles folks we're all remote uh the entire company is remote what about the others yeah i mean on the google side well obviously everyone has been remote in the last year or so um and you're still waiting to see like kind of guidance in terms of what the new postponed pandemic world looks like and lydia obviously is remote indeed full-time yep i don't know i guess we're all remote here which by the way it's as you said uh leads such good timing because um we're noticing that in in in this new present and future of work um that's another motivation when when the question came up like what are the motivations for next live i would say a non-trivial motivation is we're all working remotely and we have to share our changes and collaborate on web projects faster so it's it's good timing that we're seeing so many people so many companies become accepting of remote work indeed this one's interesting is there any work going on around critical css inlining out of the box in next.js indeed um we i mean we already have um critical css inlining behind a flag so it's called optimize css and so please check it out it's already enabled by default in angular for instance and we've seen good success with it and we are optimistic that we could enable it in xjs as well so yeah user feedback would be super helpful at this stage to uh add on to that there is an experimental flag that you can enable to to try it out already um if you look for discussions i believe there's a discussion open by uh ralph from uh should be steam that's asking about feedback to try it out and figure out if um like the the current defaults are the right ones for all apps nice uh another question for tim what does the future of layouts look like in next.js this is a community favorite yeah uh it's one of the most requested features uh which is also why we want to make sure that we do it right um so we've been working on a proposal for it uh for quite a while um just trying to figure out what the right solution for it is especially looking to the future like react 18 concurrent features um making sure that like the suspense boundaries work in in such a way that um your ux is still good um and then also tying it into partial hydration and a lot of other optimizations that we can do on top of layouts but we're also investigating like other avenues to give you the same kind of experience same kind of um optimization there without having to have the like actual layouts concept per se so there's still a lot of research and development to be done there um but it's definitely something that we're going to tackle into in near future that's amazing here's one that i can answer i can take one of these any plans for programmatically creating and invalidating incremental static regenerated pages so if you haven't checked it out i put out an article recently about isr and how you can utilize it it's also in the cell documentation if you want to check it out in xgs documentation we're working to improve this even further to allow you to programmatically invalidate pages and validate them from the cache if you would prefer to use that strategy instead of using the stale while revalidate strategy this is again like tim said something the team has been thinking about and focusing on for a really long time to make sure that the api is right this could actually be a really good follow-up question just about open source which is you know you build these apis and you really have to build them in a way that stands the test of time because you're you're making something that has an impact that's being rolled out to you know companies that are investing in this framework they're investing their time and resources and i think that's why sometimes these decisions take long to make sure we do things the right way i would love to hear both from like the next js side the community side the google side just how we approach putting out open source software and making it maintainable and extendable for the community let's start with tim yeah i guess i'll start um so unlike uh like smaller projects uh we actually end up spending quite a lot of time thinking about any new feature that's being introduced as nexus has grown we've tended to take more time especially because we now have to consider hundreds of thousands of apps that are out there and that have to upgrade to this latest version um which is uh really important in so far that if we add these new optimizations to your developer experience or your um user experience or like the optimized loading that should be steam works on or font optimization that kind of stuff we want to make sure that all nexus apps out there that are currently in production can get all these optimizations for free so we've had this really long-standing policy of making sure that there's not too many breaking changes in major releases um like a good example of that is that the upgrading guide now has um upgrading steps for a feature that was removed in nexus 4 and we're currently at nexus 11. um and we just like provided backwards combat all the way back to that version and it's now being removed for performance reasons so like making sure that your bundle size like it's not in your bundle anymore if you're not using it um and a lot of these are also optimized away if they're not used as well so some of these features are just like say if you're not using uh rewrites you're not going to have the code for rewrites in your browser bundle as well [Music] and basically like we take our time to make sure that the constraints are right that you don't add you don't end up accidentally making your app slower as well by just using the feature um and then also we spent a lot of time not just introducing new features so a lot of the work that we've been doing the last six months has been less about adding features more about performance so dev server performance startup time size of node modules so you can install next quicker using npm or yarn [Music] and also the production builds so like one part of that is like upgrading to webpack five but also leveraging a lot of the work that uh has gone into fake five uh that allows for like faster builds for example like build caching um so like an example is you can now upgrade to the latest version of next you'll get webex5 enabled if you didn't have custom web configuration it's just going to work and suddenly you have a build cache in the background that you didn't have before that makes your next build significantly faster like up to 80 percent faster [Music] so that's like basically how we approach new features and optimizations and generally we try to favor optimizing either developer performance so like dx performance so like getting something in your screen as fast as possible and performance optimizations over like adding a lot of new features uh because also it does have to be maintained for a really long time like i explained like we have to maintain that for uh many major versions uh to make sure that your apps don't break and you get the latest updates yeah before i joined the versailles team that was one of the things that i really appreciated from an api design standpoint was when i updated you know going way back when i updated like from next seven to eight to nine and get those new features luckily i was able to do that with you know almost none sometimes breaking changes making it really easy for me as i was trying to adopt next gs at a large e-commerce scale to easily roll that out and you know easily rolled out to our team uh we have another i was gonna say even for our uh create react that migration strategy we want to make it as painless as possible we want you to be able to leverage the investment that you already put into your create react app apps the entire react ecosystem so that's all coming with us indeed question for alex does the new image blur work on images that live inside of the project folder so i think the question is around you know you can import images locally does it also work with any sort of dynamic images yeah i think i touched on this earlier but it does not so the the version of blurry placeholder that has shipped so far is kind of the uh let's let's call it the mvp blurry placeholder it's got uh support for uh local images um which we can um process at build time to to generate those those tiny tiny versions of the images that we want to use as the placeholder um and then if you want to use a remote or a dynamic image you need to provide that placeholder yourself and we are looking at ways to make this a a more convenient process in the future but um right now that's probably going to involve looking at your own um image serving stack whatever that is and and looking at the best way to to generate a small version of your image um we we find maybe 10 pixels wide of a very small version of the image and then it also one thing that we've um talked about a little bit in the keynote that i'm really excited about too is also then extending it for dynamic images so being able to pass in that blur data url pass in that base64 image and make it work with your headless cms with datto cms whichever one you want to choose that's that's really great yes absolutely we have a question about internationalization routing this is a feature of next 10. i'm really eager to not have duplicate folders and i want to have a different route could you give any update on internationalized routing uh so yeah definitely i'll take that um so we've been very focused on making sure that uh we got a lot of performance improvements in into nexus um and we're going to refocus on to like some of the features that are uh that's so could use some development like i guess that this question in particular is about uh you have a page in page in the page directory that you want to have available under multiple languages so different slugs basically and that's definitely something that we still have to look at it's one of the larger feature requests for internationalized writing um we just haven't gotten around to it yet one thing i want to add is we're very very invested in making the overall router and routing experience better so some questions came out about layouts and you know sort of nested routing and this is an area of active exploration awesome well with that we're running up on an hour so as we wrap things up i want to make sure that we have a chance for each of those who have been brought on stage to have a little closing statement say whatever you want it can be as short as possible or just a shout out or a thank you let's start with gujarat so uh as i mentioned earlier we're having our annual user conference event still so this is just the beginning this is a little preview uh this is just uh a taste of a lot of more improvements to come so we want to hear a lot of your feedback and ideas and whether it's that you're migrating a create react app application or trying out next js live or using the improvements for image component let us know how that all goes and stay tuned for all the uh next steps that are coming in nhs hussein yeah i uh i actually want to give a shout out to obviously the purcell team for you know being super close with us letting us test many features um on xjs but i also want to give a shout out to other engineers on the aurora initiative on our side you know alex has been amazing shipping the image component and all image kind of work ralph has been instrumental in shipping the script component and thinking about font optimizations and third-party scripts gerald on our side has been thinking about react 18 and the future of react and conformance and and concurrent mode with nextgs um we're a very small team but i definitely want to make sure everyone on our side actually gets that you know exposure for all the features that they land chubby um yeah i'll close with saying that yeah i think we really feel like we have landed on something good here in terms of you know like we struggled a lot with how to um land towards like predictable outcomes and we think frameworks was the missing piece and to that puzzle and so i'm really excited that we have been able to start this journey obviously we are super early still uh and welcome any feedback from the community so yeah check out our blog posts uh aurora conformant and please don't hesitate to send feedback my way lydia yeah i just wanted to say thank you to purcell that i was able to represent the community that has done such an amazing job on landing all these features and making everyone's life easier frankly with everything that they've added um yeah i cannot wait to to get started with everything that's just been announced alex yeah i just want to say how excited i am about this this collaboration with uh for sale with next.js i think it's leading to really great developer outcomes already i'm excited about a future of the web where a lot of the hard parts about making a you know a great website are handled for you and you get to focus on um the just the the good part of webgl and finally tim yeah uh so i basically have two things to say like the first is that uh it would be good to note that the collaboration that we're doing with shiva's team that's now called aurora has been going on for quite some time uh so if you think this is a new thing it actually isn't uh we've been working with them for for uh for i think almost two years now um and uh we've been able to do so many performance improvements and see those propagated through the community uh so i'm really grateful for that and the different great partners in that um and the other is if you landed on this live stream and you don't really know what next jazz is or you want to learn more go to nexus.org learn and you'll get an interactive tour through next where you can build your own app end up with a small blog for yourself and it's it's been a really enjoyable way to learn uh for folks new to nexus or react as well awesome well thank you to everyone for joining today i'm going to now move y'all to the backstage thank you thank you thank you and we can conclude this year's well this special event of next js conference i really appreciate everyone tuning in it's been a blast today answering questions from the community i hope you enjoyed the keynote go check out all of these amazing links the links from the google team the links from the purcell team give us your feedback on discord feel free to dm me if you have any questions too and we will see you this fall for another next js conference thank you so much enjoy the rest of your morning evening day wherever you're tuning in from and we'll talk to you more next time

Channel: Vercel

Views: 9,824

Keywords:

Id: ANikp1R8zX8

Length: 61min 50sec (3710 seconds)

Published: Wed Jun 16 2021