Next.js AMA with Lee Robinson

[Music] hey everyone my name is lee robinson and welcome to today's live stream ama on next.js and purcell today i'm going to be answering any questions that you have related to next gs for cell react surfer components pretty much whatever you want and first before we get started i'm just going to give you a little background on myself so my name is lee robinson i'm a solution architect at burcell and really what that means is i help out customers who are getting on the versailles platform and i also help grow and educate the nextjs community um yeah so we were able to put out a thread on twitter and ask people to send in some questions ahead of time so the way this is going to work is i have a list of questions that y'all have asked ahead of time both on twitter and on discord and i have those ready to answer and then i'm also going to be checking the chat answering some of your questions inside the chat and doing my best to answer everything as good as i can so i'll start with some easy ones and we'll see what we can get into we have about an hour so first up an easy one does nextgs support webpack 5 yet so we've been working closely with the webpack team there is currently beta support but in the next stable release of nextgs we're going to have complete support for webpack 5 and i'm pretty excited about this another pretty easy one which is jesus said this which is what's the best way to push a route from get server side props so this could mean a couple different things but what i'm guessing what you're talking about is redirects so a recent improvement to nextgs was an optional redirect value that allows you to kind of skip some of that boilerplate and easily redirect or you know push to a new route when you're on the server side so basically you just add this redirect key inside of get server side props um this is in the next.js documentation now too as well and that will allow you to for example permanent redirect or temporarily redirect to a different page so this might be if you're trying to do like uh authentication on the server side for example ama stands for ask me anything hey everyone thanks for joining right now i'm just answering some questions that people asked ahead of time and then i'll get to some of the ones in the chat another question from derek is there a way to make subdomains work with nextgs and i put out a blog about this that maybe somebody can link in the chat it's called incrementally adopting next.js and this goes really in depth on a few different ways that you can incrementally adopt nextgs one of them being using subdomains so the short summary of this is you can use either subdomains sub path or even a mono repro approach to allow you to kind of incrementally adopt an xgs in your organization somebody will put a link for that in the chat and that will go way more in depth another question this one's pretty exciting how would you implement feature flags at page load time so like in a server-side rendered solution um the nexus team is working on a kind of generic a b testing solution that will just be built directly into the framework uh it's still pretty early on this but i'm excited to see this land because i know that it's a pretty common request for people trying to do you know experiments or personalization of pages uh at request time so i'm excited for that uh let's see matt asked how might react server components or next gs help teams ship ui code in a single client application so we just really recently released a blog post about react server components and included some good resources a really high level overview as well as a video that i made that goes more in depth on how react server components work and really the summary here is that react server components let you use the client and the server for what they're both the best at so you can serve your presentational components from the server that might have really large dependencies like markdown or date formatting and then you can still serve your interactive components on the client side so maybe a nav bar or a search input or some other you know interactive client experience where you still want to use react you still want to use javascript um and i do think this is really going to change how we build react applications and make it easier for teams to collaborate make you know better performing applications and overall just kind of a better user experience too so i like to think of react server components as the like the culmination of what the react team's been working on for three or four years so i'm very excited about that um let's see regis asks how can you send an email with a form um probably my favorite way to do this would be using an api route with next.js now you don't have to do it this way but we'll talk about the api route first so if you're using an api route it essentially allows you to add bits of back-end functionality to your application for things like authentication or filling out a form or you know stitching together different pieces of your application and when you do this you could do it through like a vanilla email library or you can use uh you're probably going to use a provider like a send grid or a mail gun or one of these third-party libraries that make it really easy another thing that you could do if you didn't want to have an api route is you could use uh an automation an automation site like a zapier or a trade io and then you can kind of just hit a web hook and on their website like on a no code side of things you could build a workflow that would allow you to send an email or send a slack message so there's there's a few different ways to do that on my website leerob.io i have a snippets section and i have a few examples there of using sendgrid i believe i have a mail gun one as well too um what else what are the differences between next image and gatsby image there was also a question in discord about blur up placeholders for loading um so i'll start with kind of how they're similar and then i'll talk about how they differ a little bit and i'm doing a talk at jam stack toronto in a few days on the 20th if you want to hear more from this it'll be myself gatsby netlify sanity i think are all going to be there so that should be really exciting um basically the different differences in the similarities um the similarities between next image and gatsby image they can both resize and optimize they can both lazy load by default which is great helps speed up your page loads they both prevent layout shift by defining what the width and height of those images are so that you don't have cumulative layout shift they both use sharp which is the library locally for resizing your images and doing that optimization and they both allow you to pass in some parameter where you want to adjust the quality of those images now there are some differences gatsby's is more of a drop-in replacement for image tags so it's optimized for kind of fixed width and height images so next image is a little bit different it's more of an opinionated not really a drop-in for an image tag but it's still built on just standard web technology like using an image tag with source sets and and opinionates all that for you so you don't have to do any of that yourself gatsby image uses graphql next image is isn't really opinionated on how you want to fetch your images whether that's local or remote images next image currently supports webp but gasps image is adding this pretty soon i believe with their v2 same with uh avif i don't i don't know if you pronounce it like an acronym like avif or vif or avif i don't know but next image and gatsby are going to be both adding support for that next image currently doesn't have blur up placeholders which is one thing that gatsby image has but we're working on an rfc that is going to allow blur hash or blur up placeholders as well as prevent you from having to always specify the widths and heights of images so we're gonna have some solution that will allow you that you don't have to do that unless you're fetching remote images or something like that so stay tuned for some more information on there um let's see what's the best resource to get started learning nextgs um i would highly recommend the official learn course it's very thorough and it really allows you to walk through and build your own blog using markdown explains things at a pretty high level so that you can kind of grasp all the different concepts and then at the end of it you also have something to show something tangible that you've built and get it deployed too so that's that's really fun how we doing i have a few more in here that were asked ahead of time so for anybody for anybody joining i'm just answering some questions ahead of time and then i'll jump into the ones in the chat so when should i use next export instead of next build this is a common question i've heard a couple times so next export exists mostly for backwards compatibility next build can do everything that next export can and there's a lot of features that are in next build that you'll probably want to use like internationalization and image optimization and more so personally i would recommend using next build basically anywhere that can run a node server can run next build and that works with xero can play deployments to purcell too which ties into another question that we had which was could you provide guidance on the best practices for self-hosting and absolutely so this is something that i'm working on right now um obviously i work for vercell so i'm biased and i think it's the best place to deploy next chess applications it was designed to build and run xjs applications but obviously you know that won't work for everyone and we want it to be still a great experience using xgs we want to provide that guidance in the documentation so i'm going to work on some documentation talking a little bit more about self-hosting it'll probably be docker based with like a docker file showing the workflow through next start so that it's usually so it's easily usable across whatever infrastructure you want to deploy to as most backend solutions have some sort of docker based support um that is most of the questions that i had ahead of time so thank you all for joining there's so many questions in the chat um i will just scroll up and start grabbing some is there any eta within burcell for the release of a shopify next.js commerce demo so if you haven't seen i'm going to try my screen sharing see how it works um if you haven't seen we have next.js commerce which is a starter kit for high performance e-commerce sites and it's got a lot of really cool stuff included it's fast uh it's built on all the best next js features and right now it works with bigcommerce so you know if you go out here you can try it out uh and it works with bigcommerce but we want to add support for a bunch more e-commerce providers and the next up is shopify so we are targeting support by the end of the month early february is kind of what we're thinking um pretty excited for that hopefully that'll be coming really really soon hi to everyone saying hi in the chat um let's see am i doing anything wrong if i'm treating isr as throttled ssr not necessarily so the way i like to think about it is one of the big benefits of doing isr which is incremental static regeneration i know there's a lot of acronyms so bear with me and what incremental static regeneration is it basically allows you to still serve up a static site when you have a lot of dynamic content without having to do a full rebuild of your application so just to do a like a quick recap of all the different ways you can render and you know leave a comment in the chat if you want me to go more in depth on these but you have client side rendering which is like a traditional react application server side rendering which is how nextgs started basically on every page request you're getting unique html you have static site generation which has been around for a while with things like hugo and jekyll but basically you're generating these html files ahead of time but then you also have incremental static regeneration which is an xgs specific thing and it's kind of a merger of static site generation and server-side rendering so you're not you're not doing anything wrong the way i like to think about it is with isr you're guaranteed that the first hit of your application is never down because it's always static so regardless of if your database goes down or somebody you know tries to take down your website or something like that the first person going to your website they're always going to see that static content and you know if your site is truly down somebody took down your database what happens is isr when it goes to try to fetch that new data if it's not successful it won't purge the cash which means that you're never not gonna show a page you're never going to show a broken page so you're always having uptime you're always showing at least something and that on the inverse if you were doing server-side rendering and your database was down and then you're you're not going to have a good time basically um welcome everyone how is it working at for sale um i've been at versailles for five five or six months now and it's been great i was a member of the next js community and the react community for a few years before joining purcell and was just really interested in this space mostly for my own personal curiosity i've i've loved using react for a long time and nexus kind of simplified a lot of the things that i didn't like doing about react applications basically it made it really easy and i i really enjoyed working with burcell and deploying the versailles platform so i used it for pretty much all my projects so it was actually a pretty natural fit for me to come work with the purcell team and i think my favorite part about working at purcell is there's a lot of really smart people and they all are kind of aligned on the same mission which is great so whether it's people in engineering or people in design people on support people in management all the way from the top down from the ceo everybody is really you know they can all ship they can all like we have designers who can code we have coders who can design it's it's great um find some more questions is it better to have different code bases for the landing page blog app or admin or should everything live in the same code base when using next.js so you can actually do this all from within the same code base and typically this is probably the preferred way to do it um i'll throw a classic it depends in here because it does depend on how many people are working on your application for example if you have like a massive application and you have lots and lots of things going on in one repo aka like a monorepo for some teams that's just not the preferred workflow that they like you know too many pr's too many merge conflicts you know but for a lot of teams you know individuals smaller teams this can be great because there's less context switching between different repos and when you're working locally you can do next dev and everything just kind of works together there's not separate projects that you have to like you know i have the blog running on localhost 3000. i got the main app running on 3001. you don't have to like stitch them together or anything like that so in general i would say i would recommend doing that got my for sell mug uh is is 2021 the year of nextjs that's a great question i don't know hopefully i mean we'll see i think that uh it's been really exciting to see the growth i think that a lot of people have realized that there's parts of building react applications that they just don't want to do themselves and they'd rather lean on an open source library that's had these problems solved you know don't reinvent the wheel so i do think a lot of people will be checking out or just at least exploring with nextgs in 2021 which library do you prefer when dealing with graphql in next.js so i sometimes i i hate to i don't want to talk bad about a library but whenever i have used the library and had a bad experience it's hard for me to recommend it so i've personally had a bad experience with apollo client in the past it could be a lot better since the last time i've used it but i struggled a lot with managing the cash in apollo clients so i i kind of moved away from using that feel free to leave a comment if you know there's a new caching support that's way better and i need to recheck it out and after that i started to use graphql requests which is a really thin wrapper around fetch i think correct me if i'm wrong i think it's formidable labs who makes that i can't remember but um it works really good um you can always do just like vanilla graphql queries in a fetch but graphql request was like just enough abstraction to help me out with that um and then for handling the caching i like to use swr swr.burcell.app if you want to learn more about that it's similar to react query if you've heard about that um discord yeah we have a next.js discord at nextgs.org discord feel free to jump in there ask questions i'm in there answering questions all the time you can dm me directly if you'd like could you point me to any resources to get better with figma i have a solid skill set with nextgs but my uis don't look as professional as apps you built in your streams thanks um first off thank you for the compliment i appreciate that uh this is hard this is one of the hardest parts right because front end development is already a lot there's already so much that you have to learn you're learning react you're learning i mean from the start right html css javascript and then it's like react next gs there's so many things that you can learn right accessibility um and then you get to the design and you're like crap now i have to figure out how to make a good design so that's part of the philosophy why we've been building starter kits at vercell which is just there's a lot of people who are on this learning journey and they want to make an application that looks good and they're they're still trying to learn they're not great at design yet but they still want to have something that looks beautiful um so the starter kits have helped with that but to answer your question i think the two best pieces of advice i can give one is repetition so i did not get any good at design until i spent time in back in the day in sketch a lot building things i use figma now i really love figma so actually designing things and then actually building those things and you know if you don't have the eye for design yet i would just try to copy existing websites um that's one thing second is there's some good resources i can point you to probably the best resource from a developer trying to learn design is refactoring ui by the creators of tailwind that book and the associated videos like blew my mind because it really helped me as a developer understand more of what the designers were looking for so that's great and then on my twitter um on my twitter at lerob with three e's because somebody else took the the 2e1 i just retweeted a i think it was beginner figma or introduction figma or some website like that that was a really great resource with just you know i've never used figma before and i'm trying to learn so so check that out as well jam stack toronto for the win yep i'll be there in two days on wednesday the real question is how do you go about acquiring this fine piece of clothing that you're wearing so yeah we have some uh some next.js swag and some versailles swag um i don't know maybe someone from brazil will be in the chat giving away some swag i don't know we we give away swag every now and then to people in the community and um you know people who speak at our events and such but yeah it's really nice i really i wear black for pretty much everything so it fits my aesthetic can i have the discord link yep it's just next gs.org get whole get github i don't want to say github org nextgs.org discord sometimes when you talk too much your words just get all fumbled and you can't say anything um i would like to see nextgs make it more easy to use it with headless wordpress the current example got a ton of things missing yeah that's really good feedback i will make a note of this and see if we can improve that i'm assuming you're talking about like the blog starter example that uses headless wordpress so i'll check that out and and try to make that better sorry about that bad experience um hey this yeah i don't i don't know how to pronounce that i don't know we're just gonna go with that let's see where are the questions being taken from here discord so currently i'm just pulling questions from here um so if you put one in discord i don't have it open right now so feel free just to paste it in the youtube chat images will be even better with next yes yeah hopefully i mean just to step back and talk about kind of the philosophy of next image and and why it's a thing in the first place is the next.js team and the google chrome team collaborated on this with the intention of images make up of like a lot of the web a ridiculous amount of the web so if we can improve the loading performance of images we can in turn improve the performance of the web so this is very aligned with google chrome's initiatives and their goals and for them you know the best way for them to make impact at scale was to work with parties like purcell and like nextgs where they're already established frameworks and they can put these best practices in there and then everyone's just a you know an mpm yarn update away from getting all this for free so the the missions and the goals are very aligned there and hopefully people will enjoy using next image we're going to make it as easy as possible for you to have really performant image loading and optimization so at the end of the day you have really good lighthouse scores and just a tangent on this another reason why we want to do this is there is a change to google's pagerank algorithm in i believe may and it's more heavily influencing sites that have good performance so google's outlined these things called core web vitals you might have heard of like time to first bite cumulative layout shift first contentful paint and we can put a link in the chat for these but basically these are performance metrics that help you evaluate how real users are you know viewing the performance of your site so if you can improve these metrics google will say hey your site is a better experience for people on the web trying to view it from slower internet connections and we're going to we're going to reward you for that basically so it's important to know about these check out nextgs.org analytics if you want to learn more um will nexxjs use snowpack two things on this one thing i will say is never say never but probably not and the reason why probably not is i think it's really easy to underestimate how big and how important webpack is the webpack team they're amazing they're incredible they do such good work and so many companies of all sizes and scale rely on webpack and we've you know we've built next.js on top of webpack webpack five support like i talked about at the beginning of this live stream will be landing in the next stable release and it's such a critical piece of the javascript ecosystem now all these upcoming tools like a snowpack are amazing es build all these things so cool vite there's so many i don't even know all the names but they're they're amazing tools but you have to remember that it's not as easy to just drop it into a framework like nextgs because you would break so many people who depend on webpack or custom webpack setups so probably not but it's still exciting to see the innovation in the space oh no i lost my scroll there is a lot of questions here um which is great thanks everyone for asking questions uh any plans to extend next.js to embed it better in existing sites like web components um i don't have any like official plans on this or anything i can think of but i think this is a great idea i think the closer we can align with the web platform the better off we'll be and like i talked about with next image like we wanted to make sure that that was built on just html spec like it's still using what the browser is expecting and what the browser supports so it would be really cool to have better first class support for things like web components yeah that's very interesting are there any component patterns that may be helpful for migrating to server components when it comes out so i talked about what react server components are a little bit at the beginning of this basically you can use the client the server for what they're both best for um this is still in the you know rfc phase the facebook react team has this rfc open where you can check it out and learn more about it they're still figuring some things out it's not really ready for production usage just yet but we're going to be working closely with the react team to add support for that into next.js somebody can throw a demo link in the chat for the next.js react server components demo and we're going to continue working with them to make that adoption pattern very seamless as far as component patterns uh the way i like to think about it is if you think about like a facebook.com right you have on the left you have navigation on the middle you have your news feed on the right you have like activity twitter's kind of like this too so patterns for server components might look like on the server i want to serve up the things that are needing to be pre-rendered ahead of time so rendered into html so that might be the content in your news feed and like images it might be um the you know different navigation links on the side of your page right this is that presentational content i was talking about but then once that content loads you want to have these client components that allow you to do interactivity so clicking on the like button or searching for a friend to add those things that you still want to have that javascript and react on the client side then you can use server components for that to still you know inter intertwine those client and server components um let's see thank you i appreciate that the last docker in my life the better you should check out purcell it prevents you from having to worry about the docker i i have uh you know i think dockers are great um because it solves a huge problem which is like hey what's that xkcd which is like i need to just ship my computer to the cloud or something like that and that's how docker was born so true um is making a web app fully serverless with next.js and versailles a good idea i mean i think it's a good idea um yes we this is how we use a lot of the apps that we dog food internally dog food is just means like you eat your own dog food you you try out the products that you build um so like next just commerce which i talked about the entire back end for that application uses api routes in a serverless manner so yeah absolutely are there any good examples of a new relic integration i don't have one personally on top of my head but if someone has one throw that in the chat um i have some problems using material ui and next gs any work around for this so i would recommend checking out the official material ui example that's in the next js github examples folder if you're still having problems feel free to dm me and i'll i'll try to help out this is a great question can you explain what the best practices are for managing connections to postgres from serverless functions um basically this is something i think it's really easy to get tripped up on because the concept of serverless is new for a lot of people which is totally totally fine from a highest level like explain it like m5 serverless is basically someone else is going to manage your servers for you it's abstracting away that infrastructure so that you don't have to worry about it doesn't necessarily mean that there are no servers or that they've been abandoned or something like that it's just you know some data center somewhere in the middle of iowa that amazon is taking care of or google's taking care of and you don't have to worry about that you get to basically pay to rent out their infrastructure so that's serverless and then serverless functions are pieces of back-end code that you can write with languages like node.js that allow you to execute some logic so you make a http request to these functions and you get back a response so it could be authentication it could be persisting things to a database all sorts of things and there's a few best practices to think about when you're doing this so that you get good performance so if i have my database again on aws i have a postgres database if i have it in the u.s east region i want to also deploy my serverless functions in the us east region so that there is lower latency between those two when communicating so if you think about it from like a world map perspective if you're you know your servers are in if they're in us east which is like virginia or something and then your serverless functions are deployed on the other side of the world it's just going to take a while for that request like physically it will take a while for that request to to get there so we just released we just recently released some new ui settings on burcell that allow you to specify which region you want so check those out that will help you make sure that your functions are close to where your database is at that's part one part two is connection pooling and what i mean by this is let's say that you have a really high scale website and there's thousands or tens of thousands of people who are hitting your serverless functions and trying to connect to your database now you you don't want every single function to open up a connection to your database because that wouldn't be very performant so there are tools that do connection pooling which essentially says if 200 people try to connect to the database at one time it merges those it pools them so that you're not you know opening too many connections to the database so there's two good ways to do this one is using something like pg bouncer which is specifically for postgres and another is using um basically like i don't know how you pronounce it it's like post post rest it's like postgres but rest um and you're just using http for that a good example of this is superbase um somebody wants to leave a link to that too that's what they do more questions thank you everyone for hanging out with me today and throwing some questions in the chat really appreciate it uh let's see yes check that material ui example on github are there how are the discussions within the nextgs team on how to balance not loading the framework but still providing all the useful out of the box smart defaults this is a very tricky problem because you want to provide people with all the tools that they want but at the same time you have to be laser focused on performance and not increasing the bundle size so you know if i'm using xjs maybe i don't want that new feature and i don't want my performance or my install time to be decreased because of it so the team is really laser focused on this it's kind of embedded into our dna at burcell everything we do revolves back around how will this impact performance so a great example of this is image optimization when we released image optimization we had support for a handful of different loaders which essentially is like the services that you want to use you want to use cloudnary you want to use imagex you want to use whatever right and we saw a lot of prs for people who wanted to add more loaders the problem is you know that doesn't scale very well as far as the number of javascript that's bundled into the next.js library for every loader you're going to have more and more and more javascript in the next js package so instead the approach that the next team took working with google chrome was to provide an option for a custom loader so this custom loader allows you to specify what you want the url to look like which then makes it available for any number of loaders that you want so a much more scalable solution that required a bit more thought and planning to get right but doing it right not only has you know better performance for everyone else using next jails next js and uh keeps that dx still really high so it's it's really a core part of the next gs team are there any recommended solutions for error logging outside of an xgs app self-hosted um for the client side if you're trying to well i guess server side too but if you're trying to catch errors and say the most popular solution is sentry it's open source um and that's for like air tracking and monitoring for just general you know did this succeed did it not succeed how long did it take type excuse me logging um you can do just console log in your serverless functions or your backend when you're self-hosted and you can divert those to whatever logger of choice you want depending on your infrastructure so i think winston is a popular one that kind of formats things in the correct in the right way and then oh man i can't even think of what self-hosted infra is used for logging but i know there's a few different logging tools in the kubernetes stack of things but that's it's beyond my pay grade what did i think of the recent state of js um i always take these frameworks with a grain of or not these frameworks i always take these surveys with a grain of salt just because it's who knows who submitted for that who didn't submit for that what the demographics of that looked like you know who was emailed out about that so i don't treat it as the bible per se but it's sometimes interesting just to see the growth of some of the newer tools in the space so it was kind of fun to read about um things like sveltzvelt's doing really awesome and people love using that and some of the like es build is super cool i'm really excited about that but you know take everything with a grain of salt basically what is the best way to do a modal um it depends on if you want to build it yourself or if you want to use a component library so if you're already invested in a component library like a material ui or a chakra ui or or something of that effect they probably have modals by default if you want to build it yourself i will i would probably caution against it because doing it right requires you to have a good understanding of how to create an accessible modal and you can absolutely go through the legwork to figure this out but there's a few really good libraries one is called radix that has a headless modal so i believe it does correct me if i'm wrong but radix has like headless ui components another one is reach ui react aria is one from the adobe team all these libraries headless ui is one from the tailwind team there's a bunch they allow you to provide your own markup for styling whether you want to use css modules or a css and js or whatever you want and still get the like the accessibility benefits of creating a proper modal so i would recommend still using some kind of library so that you're not making a non-accessible modal for your users uh things did improve with apollo client v3 but there's still some issues uh working with next router interesting yeah i might have to check this out and just see how the the caching world has changed with apollo but that's good for good for me to know [Music] is there a better way to deal with component styling then importing the styles as an object and applying them with a class this with the bem style notation seems quite cluttered so you shouldn't have to use bem which stands for base element modifier it's a naming structure that was popularized in the sas days of i mean sas is still a thing but it was popularized with sas that would allow you to name your class names in a repeatable predictable way you shouldn't have to use this with css modules because the css file that you're importing for that component per se it's scoped to just that component so if you have a class name wrapper or container inside of that file you could also have one that's called container or wrapper and a different one but it's only scoped to that specific one so that's the huge benefit of css modules so it kind of prevents you having to figure out that naming if you want to completely get rid of naming i would recommend tailwind because it ships with utility classes that once you figure out those utility classes then you don't have to worry about naming anything ever you should stitch together utility classes so i've enjoyed using tailwind more questions i am frequently used an app that has pages behind get server-side props i find those pages are slow on purcell is this cold start latency are low user apps better on a node server so it's likely due to what i talked about earlier which is optimizing your serverless functions for performance so just a quick summary of that was make sure that your database or your data store is located close to your functions in the same region ideally and make sure that you know you're using something like connection pooling if you have a lot of users or something like superbase if you want to do http for that um but it shouldn't be it shouldn't be an issue feel free to dm me if you're still seeing trouble with that do you listen to sea shanties so this is like all the rage right now isn't it uh all the people on tick tock are going crazy for the sea shanties um they do they are pretty good i'm not gonna lie like i i am a musical person i got my guitar over there and my brand new record up here i've i have lots of records um so i do really enjoy music and yeah see shanny's chef's kiss love it how can an existing create react app incrementally adopt next yes any example repos so you are in luck because i just opened up a pr yesterday i think uh for i'm working on documentation for migrating from create react app and react router to nextgs so within the next couple weeks we'll say i would expect that to land uh in the next gs documentation and provide some good guidance for you know if you're used to react router and you want to figure out how to do that in the next router world and if you're used to create react app and you want to figure out how to get that in the next world it's all going to be in the documentation so stay tuned for that greetings from russia hello can you please tell me how to structure large-scale projects in terms of application in terms of architecture and file structure from tony stark tony stark the the real deal he's here it's iron man um it depends uh it's funny because things like prettier have got popular for formatting how code looks you know as a developer there's this term called bike shedding which is basically like when i'm reviewing my code i don't want to waste time getting into arguments with people because somebody used to semicolon or somebody use tabs or spaces so you have tools like prettier which say you know what here's the standardization this is what your code's gonna look like and we're gonna follow it um we've been trying to do something like this and by we i mean just like the community for file systems so i think uh ben has a benawad has something called destiny which is like uh basically prettier for file structures i think something like that could be interesting if that ever becomes a thing i don't know how like work in progress or if that's stable or not but something like that would be interesting just to to manage the the folder structure next is pretty unopinionated and how it does that other than you know you have to have a pages folder those are where your top level routes are you could have a styles folder at the top level you could have a you'll commonly see a lib or a library folder which is like the logic where you connect to external services you might have a util for utilities it's really up to you what a great segue because i needed to take a drink of water i actually bought the book refactoring ui last year thanks for the response yeah refactoring you guys great um also for me too just building off this again following really good designers on twitter too or just anywhere dribble uh allows me to just kind of ingest what good design looks like and then try to figure it out so luckily there's lots of great designers that purcell too so i get to see what they're doing and be like oh wow that looks really good i should do something like that what do you recommend to do or learn to get more professional skills as a developer mastering data structures algorithms something specific about front end oh boy let's see it really depends because i would say for the majority of the places that you're going to work as a maybe this is a hot take the majority of the places that you're going to work as a front-end developer it would be way better if you knew how to create performant accessible web applications than if you knew how to do complex data structures and algorithms now the caveat there is for the really large tech companies if you're working on the back end or like the front of the back end right you might still need to know how to do these things and they're commonly in the outdated coding interview process but in general i think the web would be a lot better off if we spent less time reinventing the wheel with crazy algorithms and we said said nope here's how you do it it's okay if i have to google how to do inverting a binary tree or whatever crazy interview questions they have nowadays and instead i focused on creating these accessible performant applications so that's my that's my hot take we gotta get oprah in here and just throwing out you get a shirt and you get a shirt ah let's see avif okay avif what is happening with react server components in the next.js space so we're working closely with the react team to integrate this into next.js nextjs will be the probably the first framework that has support for this so basically stay tuned hopefully that happens sooner than later but we'll see it's still in the rfc phase thank you so much pedro i appreciate it is it important to have a good background in create react app before migrating to nextgs um i would say no i think that it's good to have a base level of react knowledge whether you want to use any of the react frameworks but i've you know i've been making educational content around nextgs and react and i found that i've been able to educate people who are react to beginners entirely starting with next.js and part of the reason for that is there are parts of the react ecosystem that you might need to learn when you get more advanced but when you're getting started i really truly believe that the best thing is seeing like incremental progress like it's really deflating to try to learn and hit error after error and not actually get something built like as as i'm learning new things the most inspiring and exciting thing is when you come it compiles right it runs like my code runs so that's why i think i've i've seen good success actually teaching people next yes by default because the amount of configuration or code needed to just get a hello world application is really really low and then with react fast refresh which makes it like instant basically when you save and you update your page it gives people that wow factor of like oh wow like i just you know changed my html and i see it updated on the screen and i think that incremental progress helps keep people interested in wanting to learn more and this is my personal philosophy like if i'm not if i'm not interested in learning anything then i would just get burnt out like i have to be somewhat interested in learning this stuff or it'd just be kind of a slog so i think it's important to to really try to keep that interest at heart um use your video for fonts today where it's like a charm thank you very much um on my youtube channel there's a video about performant web font loading with the best practices for 2021 check that out if you want to learn more react server component something real or was it just a joke on twitter i don't know the verdict's still out i think the react team did they did release it around christmas so it's possible that it was just a prank i mean we we don't know yet i'm kidding by the way um can we place authentication in front of a nextgs app and not within the app yes you could do authentication at the um at a higher level up in the stack basically so you could have uh an authentication layer in front of your next.js application if if you really wanted to any generic resources or migration guides for moving existing react apps to next js so i have a blog post that we can put in the chat about incremental adoption of next.js which outlines a few different strategies for how you can load that content that's one piece um i'm working on adding migration guides for all the different places you might be coming from in the documentation so one for gatsby's already there as mentioned previously one for create react app and react router will be here soon and if you're still stuck feel free to dm me and we can try to figure something out lots of good questions thanks everyone for hanging out really appreciate it lcp largest contempo paint yep that's another another core web vital this is a fun one what do i think about the no code movement um maybe more hot takes stay tuned for all the hot takes i think that no code and low code tools are fantastic but but at the end of the day no code can be fundamentally limiting at a certain scale so i think no code is great for getting people into the technology or development space who might not have the time or the resources to kind of learn more about it but it introduces a little bit of friction down the road um there was just uh like something that was popular on twitter a few days ago it was like an old steve jobs video where he was talking about how like the best code is the code that you don't write like you want to prevent writing 80 of the code and the the key thing there is 80 so you want to abstract away 80 but at the end you probably still need to have that 20 of the glue code to like hook up your different pieces together and there's a lot of there's a lot of innovation and a lot of excitement in this space that's why i prefer to say like i would go all in on low code not necessarily no code i think no code is still a little ways out but like i view webv or webflow is kind of like low code like you still need to understand css a little bit when you're using webflow um yeah that's kind of my take yeah i was talking about analytics earlier thanks to hanker christina who is in the chat dropping all the links um let's see i wonder what next gs11 will be like me too i have no idea we'll see i'm sure it'll be great lots of new features i don't know when it'll be out but stay tuned um best resources for state management in react um there was recently a state management series on egghead.io i'm just talking about all the different options in state management there's like a million different state line state management libraries today and it really depends on the type of application that you're building you can get i don't want people to get upset but you can get pretty far using like a re uh rat context and uh use reducer or something like that i know that people argue that react context isn't really state management but it really it really depends on what you're trying to build like when you're trying to do if you're trying to build figma right like you're not going to be able to use react context and use reducer in a performant manner that's when you probably lean for some of those external libraries why is next.js providing special support for tailwind css is there special benefits of using it um really the reason why we started a tailwind rfc for um integrated support into nextgs primarily because we saw a ton of people who were using tailwind with nexjs so we just want to make that developer experience as smooth as possible and are there any special benefits of using it one of the nice things i like about tailwind that i feel like i don't see people talk about as much which is tailwind's awesome for like the utility classes and quickly building uis and all that stuff but the cool thing is your set of utility classes it is constant if you build a hundred thousand pages in your application or something ridiculous right you're never going to probably like you can build an application where you don't need anything more than those utility classes when you compare that against if you were doing something where especially when you have like disparate teams working on an application where you have to coordinate and each one adds their own styles for each page like you're shipping so much css then like every page has its own css so the cool thing about utility frameworks really in general like it's not like this is a new concept per se but tailwind has really simplified the dx of that um is that you know as your application scales the the number of classes remains constant um let's see i talked a little bit about this one but yeah i expect that to be in the docs here very soon oh yeah there's a hackathon that we partnered with hashnode and you can get some of the swag that i'm wearing so go check that out i think there's like a 500 prize too so that's really cool is the next dark mode theme library a good option to provide theming with sas modules i would recommend checking out the next themes library uh it's really simple easy to use api made by one of our for sale co-workers paco and yeah should be everything you need let's see this has been really fun you guys have lots of great questions um hi lindsey big fan big fan lindsay's doing lots of great work over at netlify shout out to lindsay um if anyone has new relic integration information please let me know that would be great any downsides of using preact with next.js so i'm trying out preact right now just to see how it works on my personal site to reduce some of the initial javascript that's sent over the big caveat here is that we don't really know i mean i don't really know personally what the future of pre-acts roadmap looks like um specifically with how they'll handle things like concurrent mode and react server components i'm not sure if those will be supported in the preact world and those are probably going to be things that you want to do with react so it's maybe worth checking out but as far as the future longevity goes i'm not sure if that will align with the react core team's plans do i write tests in my current role i'm not really writing that many tests but i've definitely used to write tests all the time right now i'm mostly focused on working with the customers of vercell and then working with the next case community and a devrel aspect but in the past yeah i've written plenty of tests a lot with jest and i also really prefer writing integration tests whether that's cypress or using a service like checkly really makes life a lot easier to do it that way how to remove unused bootstrap css and xgs that's a great question i am not sure but i bet you can configure purge css to handle that for you um [Music] where can we find your music um this is random but i'm just gonna answer it so fun fact maybe this is like the i'm working on actually recording my first music because i signed up for a music class to learn like the production of music and that's been really fun because i've played music for a variety of years but i've never actually like recorded something and put it out into the world that was you know decent quality so i'm excited to excited to do that yes it's a brand new record i had to get this one on ebay they were sold out so quick um shout out to brand new tony stark is in russia i just realized i'm like super far behind in the chat he's hiding out in russia that's really funny um lots of good questions thank you so much for joining we really appreciate it um oh yeah this is a really good point so you can we're talking about directory setups you can move the pages folder into source so like a top level source folder is supported by default why is geist ui getting so little support so a little clarification here there is an open source library called geist ui that one of the members of the community has made that looks similar to the vercell design system the good news is here we're working on open sourcing the purcell design system and component library we've just hired a few people who will be working on this super exciting i think everyone will will really enjoy that i've been learning nextgs for a month now what advice do you have keep going um try to learn as much as you can build as much as you can for me things really stick when i actually build actual applications whether i'm just copying like rebuilding twitter.com or rebuilding expedia.com that sounds like the most random thing expedia.com yeah um rebuilding chat roulette i don't know will your recent research about font loading lead to something built in with nexus so we don't have to do the research ourselves yes absolutely um it's one of the things i love the most about nextgs which is let's figure out the best practices and the most performant ways to do things and then help more people do that so that they don't have to spend the time reinventing the wheel so i would expect font optimization support to to come to nextgs we've experimented with this a little bit but it was only for google fonts so i would expect to see this expand a bit more i talked about this one a little bit earlier just um what no code will look like but i don't think anyone should be scared for their jobs if you're a coder it's it it will not replace coding in any ways and you know somebody still has to somebody still has to make webflow.com that's just my opinion though oh no so many comments okay uh are there good examples of how to retrieve your cms content from static site generation and then use it for all your page generation um so there are i believe like eight different examples for different cmss in the next.js examples folder on github so basically whichever cms you want headless cms there is an example for how to use that with ssg would we ever get forms from brazil to nextgs um so there's a few different options for kind of how you can wire this up yourself if you're wondering if it would ever ever be like a built-in part of the versailles product maybe it's not on a road road map right now but who knows um yeah check out this web font best practices video in the meantime before this is built into next gs yeah formium's great shout out to jared for working with forms yes so just for still have any e-commerce partners in addition to bigcommerce um we we partner with a lot of e-commerce providers but specifically for the next.js commerce example first was bigcommerce next will be shopify and then don't hold me to this but i think the third one is swell so correct me if i'm wrong in the chat um would i ever see myself moving to another framework like view or svelt or just react all the way um i'm pretty invested in the react ecosystem now view is pretty i mean it really is pretty similar i think the biggest difference for me from what i've played around with view a little bit and view experts correct me if i'm wrong but vue seems more focused on the single file components where kind of everything's in an entire file um but overall i think view is doing a lot of things right i think frameworks like too like next and nux are kind of like co-inspired by each other um germa had a talk at a next review conference where he talked about like the the origins of nextgs and how that worked with with nux too so maybe somebody will link that but it was it was really interesting that predates me so i was it was all new to me too this is interesting because i've been thinking about building an example for this so let me know if you all would find this helpful but do you know of any real world examples that are like the vircell dashboard that are open source um yeah i would really like to build something like this um because i think this will help for people who might have built uh internal dashboards with a create react app or something and they want to move over i really want to build something like this with react server components because i think that that's the future of the versailles dashboard too no code is just someone else's code that's really fun it's true what do you think of react is merging with nextgs so i don't think this will really ever happen um i like to think of react as the if you think about a computer analogy react is like the os layer the operating system layer it's like the most low level one and people can reuse react with all sorts of different back ends too like you could serve up react from php back end if you wanted to um so i don't think that they would ever merge but it's nice to have different options too in the react ecosystem obviously i'm biased and i like using next gs but you know there's going to be in the future some other thing that comes out that supports the new hotness or something like that that maybe can't support webpack and we want to encourage that innovation and you know help people create a performant web so i'm biased but yeah i don't think that'll happen i'd be curious if anyone has an answer to this in the chat how to pull style components generated css out into its own cache um this is here's a hot take i'm just going to fire off some hot takes um i used to love style components and it's still really good but um i am very enticed by like the zero run time css and js libraries because part of my job as a solutions architect now is you know working with companies and saying hey let me analyze the performance of your site how can i help you make it better and runtime css and js has uh it affects performance more than you think my guess is that the style components team is working on something like this so i'm probably wrong and maybe they already have a zero runtime solution but um check out uh stitches stitches is pretty cool oh yeah check that out recoil seems cool i've never used it so i can't really give a a good opinion this is coming it will be here at some point which database solution would you suggest using with nextgs and purcell it's this is like the hardest question to answer because it really depends on what you're trying to build like for a lot of people they need just something super simple they're front end developers getting into the back end and you know they need something that's just easy to use and get deployed maybe that's firebase maybe that's supa base maybe that's redis um but maybe there's people who have a little bit more back-end experience and they like sql and they want to stick with sql and they want to do something that's more uh more self-hosted more i want to configure pieces and so maybe that's on rds hosted on aws i actually have a blog post at lerob.io talking about just backend 101 for front-end developers i would recommend checking that out can we use swr instead of redux um kind of so it's helpful to think about application state and just state management as two well there's a variety of different state management but let's break it down into global application state and data fetching state so global application state might be like i have some filters on the left of my e-commerce site and these filters are allowing me to like change which products have shown or the prices or that that's like your global application state right um but then you also might have some data fetching state which there's different ways in redux to go about this but call some api get that data back and cache it so you can use it in your application swr replaces that part of redux so you could still use swr in combination with redux for your global application state um yeah where was i just at i saw somebody say next yes underwear where was that at now that would be something um who knows can you please tweet the blog for intermittent adoption yeah somebody will i think uh the vasel account will will throw that in the chat yeah this is a good take uh hello cms is next.js is kind of just agnostic to where you want to get your data whether it's sanity or datto cms or contentful or cosmic or there's like a million cms's so wherever you want to get it next yes doesn't care what are your thoughts on typescript do you use it at work i'm a late bloomer for the typescript phase i am just now getting into it um i hadn't really used it in the past i still don't use it for my personal site but things that burcell use it so i've i've learned to navigate the typescript world a little bit better i'm still still definitely a novice i don't know it very well so i'm i'm excited to learn more about that if you have good typescript resources i would be interested in checking those out because definitely a novice um [Laughter] know about the underwear that's kind of funny uh deploying next yes in versailles versus kubernetes thoughts please i was talking about this a little bit earlier with self-hosting documentation so technically you can deploy nextgs with kubernetes you can have multi-zone replication you can do all of the crazy hotness with kubernetes that i probably don't know about i've i've used it before but imagine me like typing in commands on the terminal like desperately trying not to screw something up with cube ctl i think people are like contested about how you pronounce that whether it's cube ctl or something else but you you absolutely can build this all yourself what we found is like a lot of the people who are interested in nextgs they want to have a scalable application and they really just don't want to think about the infrastructure there are going to be back-end devs who love that stuff and they want to hand roll all their infrastructure they want to work with kubernetes they want to host on aws themselves you know there's a place for those people too i think the majority of people in my opinion um can just use versailles it saves them a lot of time best advice for somebody that's not a developer by trade but has a good understanding of some of the techniques and that wants to build stuff efficiently and stay up to date with what's happening in this world um a little shameless self-plug but i have a free course called react2025.com and i've heard from quite a few people who weren't developers who's taken it and they learned a lot and they learned about some of the new features of nextgs and how to actually build a real world application um yeah check that out you might enjoy it there is an example in the next js repo for using apollo server side rendered with nextgs let's check that out firebase admin and xjs api or firebase on the client i think that both have a place so the nice thing about firebase admin is when you have that set up not only can you use it in api routes but you can also use it for static site generation so when you're in get static props or get server side props those are you're running node.js code so you can use firebase admin there to query all the products in your database or something and statically generate those pages and going even a little bit further you can do incremental static regeneration there as well too so that excuse me that's also in my react 2025 course which is free here's a few options for zero runtime css and js libraries there was so i've never seen people complain that nextgs doesn't suit their use case do you have any use cases where it's not the best option so jeff from hashicorp had a talk at next.js conf called when not to use nextgs and he covered this pretty well so i would recommend checking that out it's on the vircell youtube channel under the nexus conference playlist why is it called next chest i'm i'm pretty sure in that video i talked about that gagirimo did at the view conference or whatever it talked about this a little bit on why it's called next.js that's a good question though i'm not really sure yeah somebody has the nextjs twitter uh it's really funny when people accidentally tag it i don't think i don't think we're going to get it twitter's really weird about how they like release even if an account isn't active they're still it's hard to hard to get user names if it was that easy i would have at lerob but some guy in great britain has it i think [Music] lots of people love typescript typescript fanboy oh yeah yeah graphql request is by prisma not formidable i think i swear formidable had something with graphql but oh answered all my questions thank you so much uh yeah four mobile labs has oracle which is another one when do i think i'll release another course like correct 2025 um potentially this year i'm putting some thoughts together for what that next course might look like i haven't really decided exactly what it's going to be yet let me know if you have suggestions yeah nextra really cool project um it's a really easy way to do a doc site um like the swr.vercell.app site uses this um check that out if you want to build like a doc site or there's even a blog template you can use too so it basically just simplifies using mdx with with next um thank you i appreciate that um i'm assuming this was about the the kubernetes comments yeah i i'm a kubernetes novice i've only used it when i was like in my my prior job and i was trying to figure out how things were deployed we were deploying next yes on kubernetes and i did like cube ctl into the pods and restart the pods and i don't know i was way over my head i'm not gonna lie next course will be next js 2030. yeah if you know if nextgs is still kicking in 2030 then i think we did a good job that would be a very long long live framework that'd be great it's crazy that react has been around for so long i think it was 2014 correct me if i'm wrong when react came out but yeah and it's it's still like getting more popular every day which is which is pretty nuts react 77 is going to be crazy i'm finally caught up in the chat answering them in real time it's amazing um you can check web vitals with nexus analytics um yeah so if you want to do like a one-off test of the performance of your website you can run google lighthouse and chrome but if you want feedback over time you can use next.js analytics which is built into versailles there's a free tier two so you can use it on a on a hobby account if you'd like on your personal account and you can also use this if you're not deployed to for sell too so if you are self-hosted at apple or something which apple uses next.js so if you're from apple watching this and you want to use next guest analytics just send me a dm and i'll help you out yeah the name with 2025 was like i wanted it to inspire people to think about the future of how we might be building these applications which i'm not even so much thinking about nextgs or react which i do think that they'll still be popular then um it was more about like the focus on static sites as an output um i think that it's kind of contested right now like the pendulum between static sites and dynamic sites whether they're server rendered sites especially with with server-side rendering coming out and then some other frameworks in the space also doing more things on the server but i think that there's still a lot of valid use cases for static for certain applications especially if you're using something like incremental static regeneration which allows you to still keep some of the dynamic functionality of that but yeah it is it has been really interesting to see the pendulum back on the server a little bit because there's just certain things that are better on the server and the server is made to do like serving up that presentational content um yeah yeah if you want to learn more about what i talked about check out for cell.com analytics lots of good stuff there with that we i said i was going to talk for an hour it's been an hour 20. um y'all have had some excellent questions thank you so much uh it's been a blast hanging out with everybody today anything about vercell and xgs i really appreciate you all hanging out with me today and learning more hopefully i answered your questions and maybe gave you some new things to check out so let me know if you'd want to see another ama like this we might be doing these on a more regular basis just to hear what the community is interested in hear what you want us to work on um feel free to check me out on twitter send me a message anything next yes or for cell related so thank you all so much with that that kind of concludes our stream today um yeah thanks everyone

Channel: Vercel

Views: 4,986

Rating: 4.9813952 out of 5

Keywords:

Id: CwxS86AQNu8

Length: 81min 35sec (4895 seconds)

Published: Mon Jan 18 2021