So now that we've got our Miro credentials in our EMV file, we can go ahead and make sure we're in the right folder here. So move into Miro next JS, and we've got all of our files here where we expect them. And then we're going to run <a href="/tags/yarn">yarn</a>. And then once this is done, we can run <a href="/tags/yarn">yarn</a> start. But first let me stop my previous app here. And minimize this so we don't get confused. So <a href="/tags/yarn">Yarn</a> Start. And this is going to have our app running on localhost3000. So we go to localhost. And refresh the page here. We've got our new boilerplate app. And it says, congratulations, you've just created your first app. And we can authorize with Miro.So like Mattin was saying, we're going to use the Miro API because that's what we know best. And for this, we've set up in my account, I've set up this <a href="/tags/react-server-components">React Server Components</a> <a href="/tags/workshop">workshop</a>. If you're using your own Miro account, you'll see all the teams under your own Miro account. So you can authorize whatever team you'd like, or you can use the demo credentials that we have on the slides. So you see here that now the boards that I have under my Miro account are actually listed here on our boilerplate application. So if I were to go into Miro, for instance, and go to this team, I've got two boards, react-summit-test-board2 and react-summit-test-board1. And that's what we're seeing loaded here, where we're actually calling the Miro API from our app.Before we continue, Will, I just realized something. We're talking about Miro and boards, but maybe I don't know if everyone is familiar with Miro. So by show of hands, if you're unfamiliar with Miro and we need to explain a little bit, because then we, yeah, you might miss, don't know what we're talking about. Yeah, yeah, so, for those of you who aren't familiar, Miro is like a visual collaboration platform where basically you can use a Miro board to drag and drop stuff like as if it's a virtual whiteboard, essentially. so later on in the <a href="/tags/workshop">workshop</a> we're actually going to use the Miro API to list a lot of these items that you see on these boards so we'll be able to click into these boards and then see the items that are actually on on these boards if that makes sense and I see let's see in the chat here we've got a couple people with an error yeah oh yeah okay so then as mentioned Metin mentioned, you can even want to use NVM version 20. Let us know if that fixes things and we'll just give everyone a moment to kind of catch up here before we keep going.So, as we were saying before, this app is going to be the foundation of what we're going to do next. And then one other thing to mention is throughout the <a href="/tags/workshop">workshop</a>, if you are like, okay, I'm totally lost, but I don't want to like, you know, miss the rest of the <a href="/tags/workshop">workshop</a>, what you can do is you can check out the branches that we have at the end of each section. So you can scan this QR <a href="/tags/code">code</a> for GitHub or copy this link, and this is going to take you to basically a version of the project we're using that's at the state that we're in, in the <a href="/tags/workshop">workshop</a> at the moment. So this version is slightly different than the one we just bootstrapped from the <a href="/tags/cli">terminal</a> because as met and mentioned we we made a small update to the package we used earlier this morning but the functionality is entirely the same so no functional difference maybe just a difference in some of the versions you see in this GitHub repo anyone that may have missed this in the chat bennett is mentioning that she gets an error that she needs to use <a href="/tags/npm">NPM</a> or node version 20 or higher and that's because <a href="/tags/nextjs">Next.js</a> requires that. So that's why if you run create Miro app with snippet that Bill showed it will fail you if you have a node version lower than 20 which is something you should be updating anyway because the LTS version of node at this point is like 20.9.3, .7 point something point something. So at least 20 points and then higher. So that's why it's required by the <a href="/tags/nextjs">Next.js</a> team. Let us also paste the demo credentials here in the chat. If you'd like to use these instead. So this would be the Google login, and this would be the Google password. And then basically what you can do is log into Mirror with Google, and you'll have access to the account that we've been using. You'll see our <a href="/tags/react-components">React</a> Summit test board one and <a href="/tags/react-components">React</a> Summit test board two. Jacob mentions that he doesn't see any boards that he has access to with the demo credentials. So when you use the demo credentials and you authorize the team in Miro, make sure that you authorize this <a href="/tags/react-server-components">React Server Components</a> <a href="/tags/workshop">Workshop</a> team because that's where these boards are. If you authorize a different team, you might not see any boards because there might not be any boards under that team. If that makes sense. And the client ID and client secret can also paste those in as well. So just going back here, these are the credentials. So you can actually take that whole snippet and replace everything in the die-in view with that. So while everyone is doing that, shall we say that when you are done and you're at the point where it really is that you see the app with the two Miro boards listed, that you raise your hand in Zoom, so that they know when everyone is done. And if you have any questions, just let us know. So just as a reminder, once you've gotten to this point, you should see something like this page here, where it'll list the boards under the team. If you don't see any boards there, it could be because the team you're using doesn't have any boards. So just double-check which team you're in.

And if you're in a team that doesn't have one, you could just create a new board by clicking a new board here, and then maybe add a couple of items like a sticky note or something like that, which we'll use later on.So real quick to move on, before we move on rather, you might all have best luck with just creating your own credentials. So what that looks like is running this command in your <a href="/tags/cli">terminal</a>, and then clicking on the link that appears in the <a href="/tags/cli">terminal</a> here, which will bring you to to a page where you can generate your own client ID and client secret. And that's what you're gonna paste into your .ENV here. So you can see that my client ID and client secret are different from the credentials in the demo because I created this on the fly.Nice. Jacob is also done. Good job. Yeah, not in there. Made my own app instead of the demo. We can also try and switch these demo credentials with these ones as well. Maybe this will give people a better look. JAREN LELERMANN BELKERINGEN- Jaron is not able to click the link. If you click the link in <a href="/tags/cli">Terminal</a>, it might be that you need to press Command on your keyboard and then click it. And otherwise, just copy the entire link and paste it in your browser. All right. So now I think we'll go ahead and we will follow metin on the Miro board and move into the fun part of the <a href="/tags/workshop">workshop</a>.All right. So we have planned a five minute break. Does anyone need a break? Then let us know if you want to discuss anything that you thought was hard or unclear. Then also let us know. This is a good time to catch up on what we've been doing. So let me know if there's anything that you want to discuss about the part that we've been doing up to this point.In our example, we are talking to an API. And what you may have noticed is that we're just saying inside the, this is not the actual <a href="/tags/code">code</a> that's in your application, but it's the same idea. You're just saying await and then using fetch directly. So just native fetch, that's being used to talk to our client library or our API, sorry. And this is not happening in a <a href="/tags/react-hooks">use effect</a>. So traditionally, what you would be doing, the easiest way to talk to any API is to have a state with like <a href="/tags/data">data</a> and then a <a href="/tags/react-hooks">use effect</a> that talks to your server and listens for the response, call response.json, and put that in the state. That's what you traditionally would be doing. But with server components, you can just have a async component and call await and then fetch whatever your fetch function is directly. And because this is happening on the server, rendering will just pause there, wait your server response and then continue to return your component so one thing that the re uh the next gs team has built for us to make rendering a web page a lot easier is uh they have this structure in pages so a page can have a page.csx layout.dsx error.dsx loading in a head.dsx the power in that is that let's talk about layout.tsx first. We're going to be hypothetically talking about building a news website, which is coincidentally called newswebsite.com. This page, just like any other web page has a header. I'll create a header.tsx and import that in my layout.tsx, which is in the root folder of app yeah and that will have my menu and my logo because i want every page that's loaded to have this menu all right so then uh if i want something that's specific for the home page that's not going to be shared with other pages i can put that in page.tsx Then let's say our user is going to go to newswebsite.com slash article ID. Then the routing that's built inside <a href="/tags/nextjs">Next.js</a> is going to capture that because we added brackets here to this folder name. So it's called opening bracket article ID closing bracket. And inside, you see, I repeated kind of the structure that's also in the main app folder. I have a loading.tsx error and a page and a layout. Now, what I can do is inside layout.tsx, I can do everything that's the same for every article and every sub route that I could have within an article. So let's say that I would have comments with deep links, then I would have a folder inside of here. So let's move this little thing out of the way. I could add inside of the article ID folder, comments ID. And inside here, again, I could have a layout.tsx. and everything that's inside of a layout is shared with the children. So if I'm in comment ID, so I'll be at newswebsite.com slash article ID slash comment ID. I will see the layout, this layout, and this layout. Page to the aspects is only the stuff that's specific for this current route. I know this is a bit hard to grasp so please let me know if this is unclear for anyone alright does the child layout override the parent layout yeah so what I can do to make it a bit clearer let's say we'll have a had a background here, let's say that this is layout.tsx. And this will be my main.

And this will have like my header menu any. And this will be children. So if I'm in article ID slash newswebsite.com slash article ID, this thing will render layout.tsx is like your index actually. And children will be page.tsx. Is that clear?Now, if I go deeper inside that comment thing, then children will be, like the page of TSX will also accept children and it will be the component that you return from your comment ID file. And this is very convenient and it's really easy to have routing, which because you're you're just creating files, right?Now the cool thing is you see that I also have this loading.tsx. If I come to this real article ID and that's my initial route, then it will be rendered on the server. But if I come from the home page and click a link to a article, it will be rendered on the client. And what then will happen is that the loading.tsx will be shown while we're waiting for the result of this fetch <a href="/tags/data">data</a> or a fetch article in our case. So we can add a spinner in our loading.tsx or just the text loading, whatever you have as a loading <a href="/tags/animations">animation</a> or anything to fill the time. So it's super easy to create a loading component. And if you just reload this page, it will be rendered on the server again. So you won't see the loader. <a href="/tags/data">Data</a> will just be rendered on the server. And then the same goes for error. So if an error is thrown from the component, then error.tsx will be rendered. and you don't have to bother with it. You just need to make sure that, let's say, your article ID that's here. So let's say, it's FUBAR, and you don't have an article on your news website that's called FUBAR, then your fetch should throw an error, and then error will be used as the next step. The only downside in my experience, in my opinion, is that if I'm going to have a few routes, so news and archive and about and jobs and contact, I will have to create folders with layout.tsx for news and archive for about and for jobs and for contact, et cetera. And yeah, if I'm going to be working on a few of them at the same time, I'll have like six tabs open that are called layout.tsx, which can be annoying, which you can kind of overcome by just creating a jobs page.tsx and importing that inside of the page.tsx for jobs so let's say I create a page jobs I can't type anymore jobs.page.tsx and inside of page.tsx I can just import and re-export this one. And that is just kind of to remedy the problem that you can have a lot of tabs open with the same name. The reason why this naming scheme is like this, you can see this in the talk that Ben Holmes gave last week, where he rebuilt server components from scratch. I can't explain it now, but then we'll be out of time. Which I don't think you want, but it's a very interesting talk. So for those who didn't see it yet, Ben Holmes' talk on recreating server components from scratch is really interesting.All right. So it's time to, uh, work a bit. So the first assignment that we have is to update the homepage. So the file PageShotDsx. So at least all the... Oh, we've already done that. You get the first assignment for free. But that's it. So that's it. Thank you all for coming. No, sorry. Let's be serious for a minute. These people are here to learn, Will. Next assignment. Make them clickable. So, what we want to do is make deep links for the Miro boards so that you can click on them and get the meta <a href="/tags/data">data</a> for that board. So what you need to do is make sure that you need to use link from next. so if you're going to go create your page edit the page you need to import link from next slash link so as a little helper so if you have your um page.tsx um it renders a uh in ordered list with all the boards and the boards are coming from get <a href="/tags/data">data</a> and you see the get <a href="/tags/data">data</a> is in the same file it's just an asynchronous function and after a little boilerplate online for me it's like 21 until 23. Maybe it makes sense if I share my screen now, by the way. So you see that this board is coming from Get <a href="/tags/data">Data</a>. Get <a href="/tags/data">Data</a> is here. And then this is just a bunch of boilerplates to see if you're actually logged in. It has boilerplates, multiple, singular, boilerplate. And we're pushing in board.name.

But to be able to de-link to it, you'll need an ID. What you can do is look into the response from get all boards and you see that get all boards returns a board. And a board has a bunch of stuff. This is a bigger list than I was prepared for. But let me just help you there. You can also just do this. So now board is an ID. A board is now an object. And we're returning an object with boards. And boards is an array of board information. So you'll see here that board is now failing me because this is now a <a href="/tags/typescript-libraries">TypeScript</a> notes that this is an object. If there's anyone unfamiliar with <a href="/tags/typescript-libraries">TypeScript</a> and doesn't know what I'm doing here, then please let me know. We kind of assumed that people are using <a href="/tags/typescript-libraries">TypeScript</a> which is the de facto but that's been our bad. So please let me know if I need to explain anything on this. I can now use board.name. And my app will still show the name. The only thing that I've changed is that I'm now returning the whole board information instead of just the board.name, which was initially. And now what I need to do is add that link that we talked about, link. And add a link that we're going to define on our own. You can make up the route how you want it. So you need to create a new file called, say, board ID. And then layout. this is how that would work. And that way, if you go to localhost 3000 slash any number, this layout at the sexual reading that's rendered. So I'll give everyone a moment to catch up on that. And just a quick reminder that if you used your own app credentials and If you used your own app credentials and your own Miro account, you'll want to create a board or two under the account you're using and also the team you're using. So when you go to the homepage of our app on local host and you initially will see that log in button. That'll bring you to a screen where you actually select the Miro team that you want to authorize and that will determine what boards show. Otherwise it will show as untitled. Thanks for catching that, Bennett. Good one for all of us. I don't want to do everything, because it's a <a href="/tags/workshop">workshop</a> and you need to figure things out a little bit on your own. But this is a good starting point, I think, for everyone. And I guess we can agree on the same thing, right? So put up your hands, if you're at a point where you can navigate to a sub route of a board and that layout that these acts generate, It doesn't really matter as long as you just return something. So let's say I'm just going to go here and say. um metin i'm not sure if your screen is like um extra blown up but i only just see like your file structure on the right hand side but not anything on the left just it's just like black Come on. OK. How about now? This better? I see export default function, board page. Yeah. Yeah. Interesting. Yeah, I just see a black screen. Still, OK, let me try another view. How about now? Now things might be a bit small. Just better. Do other people see things? I don't know if there's actually a way for me to see what I'm sharing yet. It looks like. It's fine. Bennett, in Zoom, sometimes like if you're on a Mac, maybe you accidentally zoomed in on the screen share. Can you try hovering over the screen share portion and see if it's possible to zoom out? okay it doesn't tell me to zoom out or um in the bottom right of the screen share you should see like a magnifying glass with like maybe 50 100 those kinds of options yeah mine says 98 okay if you click fit to window does that oh my gosh there we go thanks awesome awesome Great. Will, you are the perfect person with your experience in Zoom and Miro.

So I completely understand. I see Jacob is already done with this part of the exercise. Good job. So Jacob, while you are waiting, what you can do again is look at the page. So not inspect element because that's the page source at this current point in time. But really like we all did at view source, so you see what's rendered on the server. And you'll see that stuff is handled on the server. By the way, a few people joined in the last few minutes. It's going to be hard to let you catch up, but as a best-ever thing, I'm going to be sharing a Miro board that we are using in chat now, which also lists the steps that we're going through in this <a href="/tags/workshop">workshop</a>, and some background information so you can read, and the <a href="/tags/documentation">documentation</a> that we used to create this <a href="/tags/workshop">workshop</a> is all linked in there. So you'll need this Miro board to become a Server Components expert.

Marco, this is correct. What you need to do as part of this assignment is change how we fetch the <a href="/tags/data">data</a>. So if you look at this part of the <a href="/tags/code">code</a>, this for loop basically. So we're going over all the <a href="/tags/data">data</a> that is returned from get all boards. And what's in the template is that we're returning board.name. But we want to return the entire board <a href="/tags/data">data</a> here.Andrew, good question. Andrew is asking in chat, what is the <a href="/tags/performance">performance</a> impact on the server when we're using <a href="/tags/react-server-components">React Server components</a>? And I'm gonna give you the most senior developer answer ever, it depends! Like if you have a really slow server then the impact is gonna be huge, right? If you're gonna be having something on the edge since you're building on <a href="/tags/nextjs">next.js</a>, big chance you're gonna be running on Vercel and Vercel has service around the world. so the impact for your visitors will be really small and your website will be a lot faster than doing stuff on the client. But a big part of that is also caching things and invalidating cache. When you do stuff on the server, <a href="/tags/nextjs">Next.js</a> has all kinds of helpers, which I would advise you to read the <a href="/tags/documentation">docs</a> for to say when you want to revalidate cache and when you, or how often you want to do that. Do you want to do it for every render, once a day, once a week, once an hour? You can provide all this information to your <a href="/tags/nextjs">Next.js</a> app.One question I have is I'm looking at the response from the server for the main page here, and it's saying dot, dot, dot loading at the children of the layout. And I assumed that that would include the whole page.tsx, you know, render as well. JOHN MUELLER- So you're seeing this? Yes. That is not what I would expect. Why is this was broken here? But when I <a href="/tags/cli">console</a> log the boards within that, it does <a href="/tags/cli">console</a> log on the server. So that. JOHN MUELLER- I broke my own application somehow? Your Ahrefs is empty online. 64 line 52 three 53 oh yeah okay thank you ah there it is so when you look here you see loading everything can type anymore this is list of all the words you have access to I do get them. See, I just get the map of all the <a href="/tags/data">data</a>, but I also see loading here. Oh, but this is inside a template. It looks like. I was looking at the dock network response and that says dot, dot, dot loading, but maybe this is something different. Oh, you're looking here inside of the network tab. Yeah. Yeah. Oh, yeah, that makes sense. Yeah. OK. Let's see. We have Jacob and Isa that are up to speed. So I will also do the work so people that are stuck can just tag along, double closing. And it's possible to zoom in just a tiny bit more. OK. OK. So now, I have a link that goes to board ID, and I have a layout of Vsx here. And now, the cool thing is that this thing will have props. And if I console.plog and I go to one of these. is wrong i had to create the page tsx too okay then i can name this file okay oh yeah the layout is optional and the page is required yeah good point and now this logo of course will be on my <a href="/tags/cli">terminal</a> and it's undefined because if it's like this. So what's cool now is that you see here my log. Let me zoom in, most of the <a href="/tags/cli">terminal</a>. Is that I have params, which is an object that also has board id and the board id is exactly the uh like the slash <a href="/tags/creativity">ux</a> jvm etc and because i called this opening brackets word id closing bracket that's the name of the prop that i'm going to be getting so um what i can do here is say say, and then this page. So one thing you might notice now is that my page still shows this image and congratulations. You've just created your first Miro app. And that's because that's in this main layout of the TSX. So, you see here, let me zoom in again, I'm in the main layout of TSX, like in the root of the app folder. You see that I have this congratulations text, and you've just created your first Miro app. And then underneath that is children. So that's where my page is actually rendered, like my sub route.

And this is what I mentioned before. So I can put my entire main navigation and stuff inside of the main layout of TSX. And if I'm in the main route, then children will be the main page of TSX. But if I go into a deeper route, then children will be the subroute page that the SX or layout the SX if it has that. So what I want to do next is see how far everyone is. Is there anyone that's stuck that needs some help, or everyone is just fighting alone?I just kind of have a random question. So is it just the syntax of <a href="/tags/nextjs">Next.js</a> for the routes to put brackets around it? Like, that's expected? Yeah, exactly. With <a href="/tags/nextjs">Next.js</a>? This has nothing to do with <a href="/tags/react-components">React</a> or it won't work with anything else. Well, I can't say for sure that it won't work with anything else. But it's like a thing that <a href="/tags/nextjs">Next.js</a> kind of spearheaded. and I think they were using the same thing even before they were using the app router. So just the classic pages router. They also had this. Cool, thanks. And like I've been using <a href="/tags/react-components">React</a> for seven or eight years, I think, and in that time worked on different projects with different routing solutions. And this is by far the easiest to learn in my opinion. Kind of for those who did <a href="/tags/php">PHP</a> or just plain <a href="/tags/html">HTML</a> routing, this is basically how it works. So Natasha, thanks for joining in. You're asking what the difference is between the router app and now pages in Next? That's a bit too big of a question to answer again. Will, if you have a short answer that you can give while people are answering. I was gonna say that the very short version is the app directory is new-ish to <a href="/tags/nextjs">Next.js</a>. It's required for working with the functionalities that we're handling today. So it has a bunch of special kind of properties that the pages directory does not have. So you can check out the <a href="/tags/documentation">docs</a> on that, which are also on the board. And about the next steps. I think the easiest thing to do is to check out this branch, which is like then you'll be able to join from the next steps because catching up is impossible within the time that we have, because we have, just over half an hour left. So I'm going to give the people that are waiting now the next step so they can continue, which is make every item clickable so that we go to a new page that lists all the metadata of them. So what you can do with the Miro API, you can talk to the Miro API again to get all the information from that board and list, just create another unordered list of all the information that you have there. So in here, what you wanna do is create an unordered list and then you'll need board data.map the edition, and this folder, and it's not items. It's singular. And this is called item, something from this board item. First, you need to catch that from Miro. So what you can do is kind of copy paste this get <a href="/tags/data">data</a> function that we have in our main page at the sx and then instead of get all boards you can look in our <a href="/tags/documentation">documentation</a> to see what's out there to get the information from a board. Marco, how does the board page get parents as props? So I'm on that page now and what I showed you is that yeah, this is let me see where's that log do I still have that. that let me rework that so I can show you again. This was pseudo <a href="/tags/code">code</a>. So let me comment that. So you saw Marco that I'm logging this ID, which is just coming from the URL that I'm at here. here. So U-X-J-V-M. U-X-J-V-M. And that's because I used this special notation of adding brackets around the folder name, board ID. And that's why you get it as a variable in the parents in your page. Cool. So if you want to know more about how to get information, from the board, you can go to the <a href="/tags/documentation">docs</a>. Actually, we are using our client library here. So that makes it even easier. And I'll share the link to this <a href="/tags/documentation">documentation</a> in chat. But we've previously used get all boards. But now we want to have information about not the boards.

but the <a href="/tags/data">data</a> on a board. Yeah, this is what I was looking for. So we have create board, get all boards. Oh, Will, I'm a bit stuck in my head, in my own thoughts. Do you remember from the top of your head, like, the get board <a href="/tags/data">data</a>? This is the client, the API client. Yeah, I think it should just be get board. Yes, it's get board. Oh, get board. Oh yeah, and then here, yeah. And then I need to pass a ID, so we're gonna give this the parameter. Thank you. SW <a href="/tags/debug">debug</a>, that's yes, that doesn't exist, yeah. What's surface worker debugger, it's not supposed to be in there, and that's not an iterable, that's a singular thing. It's a peer request failed. Well let's go to the example apps that we have and <a href="/tags/debug">debug</a> these. So I forgot the name of that sticky. Maybe you can use this RSC repo method? CLEMENS TILDEAUXTENSIONS Oh, the thing that we have prepared. MARTIN SPLITTINGLE maybe you can use the one in the chat here. CLEMENS TILDEAUXTENSIONS Yeah. Yeah, this is... Using... Source. Util. Items. MARTIN SPLITTINGLE Oh, yeah, and what's nice about this is that it shows something. So you there's a naming scheme that we're using, like with app. and then the brackets are on board ID, layout, pages and everything, but you can still just create a utils function, utils folder and it will still work. So if it doesn't adhere to the <a href="/tags/nextjs">Next.js</a> naming scheme, then things will still work. Oh, this is my bad. You can do a TSX in a file name. Yeah, this is because we changed how the CreateMirror app that we launched two hours before the <a href="/tags/workshop">workshop</a>. This is not completely the same, and that's inside of these items.tsx in a mirror API clients is now in its mirror. Big build event is getting a failure on get board. Is that the right function call? I don't see it mentioned in the <a href="/tags/documentation">docs</a>. Yeah, it should be. You see here in the prepared branches, like that this is how it's supposed to work. So what's the failure that you're getting Jacob? It just says HTTP request failed at async, get <a href="/tags/data">data</a> app or page. So it looks like it's actually the next JS server HTTP response. Mm-hmm. JOHN MUELLER SAVITTARESEN VOORDERIJFG Yeah, I just don't see that under your methods on the <a href="/tags/documentation">docs</a> there. So I was wondering. No, it should work. Like the branches that we have prepared is all tested and like this is our backup. If something like this happens, then I I forgot what I was supposed to do next. OK, we'll keep trying. Yeah. Rodrigo, thanks for joining. And you'll get the link to the recording later so you can continue if you want to. And thanks for joining. Have a nice day.

So what I was working on is getting the <a href="/tags/data">data</a> from the board. Oh yeah, that's a good point. Decode URI components, very important. passing the port into fetch items but why is that getting that link let's just make this uh relatively there it is i fixed it so and just to reiterate on what i have now i have a list of all the information all the items that are on this board so <a href="/tags/creativity">ux</a> jv And yeah, I list their type and their text if they have any. And so long list of items on this board. But yeah, it will be different for everyone's board of course. So I'll just keep this open.

Where can we see you use Miro in real-world app? So if you go to miro.com marketplace, these are all apps, and some of them are using Create Miro app, some are not. But let's say, for example, I think an easy translator uses Miro app. Yeah, this is Hookshot. So this is one of the apps that's using CreateMiro app. But we have no way of knowing if someone submits something to our marketplace that they were using it. All that we know is that someone used CreateMiro app, and that's all we know. we don't have access to their source <a href="/tags/code">code</a>, because that gives a whole world of, like I said, its copyright issues that we don't want to step into. We just provide tools so people can get started a bit sooner, faster than writing everything from scratch on their own. Thanks, Jacob, for joining. Have a nice day. And again, you can watch the recording later. So let me get this one up also. Okay. For the sake of time, I'm going to continue because we only have 15 minutes or 17 minutes left. And gonna continue with the next step of the training. We're gonna add a loading component. So we talked about this that you can add a loading to TSX and anytime that we're waiting for a server component, yeah this loading a already for a server response is going to be shown. So what I can do is, I have this loading.tsx and I'm just gonna duplicate it, duplicate it inside the board ID folder. And, yes, I'm doing it. I'm gonna differentiate between loading main app and loading board. info. And to do client-side routing, I need to add a backlink. It's showing the loading board info. And if I go home, it's loading the main app. You see? So just by creating these two loading.tsx files, I can create separate loaders that are actually going to be shown in place. So if I now do client-side navigation back to one of these boards. So a chess board. Just because Will's last name is Bill Bishop. So you see that this loading is placed inside of the, like, we are rendering layout.tsx, and that has children, which should be the page from Board ID. But because Board ID is still loading, it's showing Loading Board Info. And again, for the sake of time, I'm just going to continue, and let everyone continue the exercises on their own speed. Otherwise, we can't get to all the training material, which would be a shame. And then we can add an error.tsx also. So what I'm going to do again is create a error.tsx. So this is why I love <a href="/tags/typescript-libraries">TypeScript</a>. I just got a message from <a href="/tags/typescript-libraries">TypeScript</a> that an error page needs to be a client component, because it's always run on the client, because it's telling me about something that's wrong on the server. That's still loading. But this is basically it. So now if anything goes wrong on my server, then this page will be shown. And the cool thing is, the main page. I can, again, duplicate this file inside of the board ID. And then something went wrong on the board page. And that way you can have more information for your visitors that if something went wrong here, here, or here, and also during development, it tells you a lot more. So if you add error pages, routes, folders in your application for every route that you have, it tells you a lot more during development also. And you can provide more actionable feedback to your users. So let's say we're building this news website. You can say something went wrong talking to the servers that we're using for comments if something went wrong, well, I think you get the gist of it, right? You can just tell them what went wrong more specifically in a really easy way. And that's all the training that we have. So this is all the basics for routing inside <a href="/tags/nextjs">Next.js</a> with Server Components. And again, the cool thing is that this will be rendered on the server when possible because it's async.

In this case, it's beneficial. This is kind of a big API call. So we want that to be a bit faster. So that's why it's rendered on the client. But you see that a lot of the <a href="/tags/data">data</a> comes in a lot faster. And everything that's async, we render it on the server.Go ahead. All right. Now, for everyone that's not caught up, you can check out this milestone branch. And then we have a few minutes left to talk about server actions, which has been released, I think two weeks ago only. Before that it was unstable and not ready for production use, but right now you can use it.I have to say, it was a bit of a weird concept for me when I first read about this, and looked at some presentations about how they work. But actually, anyone that's ever done plain <a href="/tags/html">HTML</a> or <a href="/tags/php">PHP</a> websites, they might be thinking, oh, I've done this before. Basically, what I want to do is show you how it works. if you have a form on your website which i'm guessing you do you can add an action to bye thank you jay you can add an action property which is just plain <a href="/tags/html">html</a> and like in the traditional world your action would lead to point to a url where let's say with <a href="/tags/php">PHP</a>, you handle all the input from the four. But now what we can do, as you see, I have the action create item, which executed on submit. So when the user clicks the submit button, this create item is executed. And this will be handled. Also, if your user doesn't have <a href="/tags/javascript">JavaScript</a> enabled, so then because we have this use server directive in here, it will still work even on the server. Once again, you're writing <a href="/tags/javascript">JavaScript</a>. <a href="/tags/javascript">JavaScript</a> is a Dutch pronunciation, <a href="/tags/javascript">JavaScript</a>. script. But you can just write, use server inside of your action, and it will still run on the server. It's really cool, and I still have to do a <a href="/tags/deep-dive">deep dive</a> on how this actually works. I want to take the time to read the source for this, because this opens up a whole new world of <a href="/tags/accessibility">accessibility</a>. There's just people that have <a href="/tags/javascript">JavaScript</a> disabled. They are out And yeah, this makes it really easy to cater to them. Your whole form will just work, you can have like the form <a href="/tags/data">data</a> which just plain, a plain <a href="/tags/javascript">JavaScript</a> interface, you can just work with that. Get like, in this example, we have an input of type text and that provides the content in our case for Sticky Notes, and I can just read that content because data.get is plain <a href="/tags/javascript">JavaScript</a> nothing fancy here, nothing Miro related, this is just how it works in <a href="/tags/javascript">JavaScript</a> so unfortunately we don't have actual actually have the time to do this but we already thought that when we designed this <a href="/tags/workshop">workshop</a> that two hours might not be enough to go into this but we did want to mention So I would really advise you to read the <a href="/tags/documentation">documentation</a> on this and go over these steps, so you get the experience of how it is to work with server actions, which are super, super nice. One honorable mention is for use optimistic. So you can use optimistic rendering. So if you're waiting for your form to respond, you can already say, like, I expect this response and render your page as if that response was there, but kind of re-render it if the response from your server is different than what you expected it to be. And that makes it really, your website feel really fast. The perceived <a href="/tags/performance">performance</a> goes up by 10X. So to do that, there's examples, there's documentations. We have some <a href="/tags/code">code</a> snippets here listed on the Miro board that you can use. And if you want to look at the final result of that, you can just look at this branch.All right, so we've reached the conclusion of the <a href="/tags/workshop">workshop</a>. So I hope that everyone learned something today and is as excited as we are about server components and will hopefully migrate to the app router in their applications. Is there any questions? We have a few minutes left. So are there any questions that I can answer?I just wanted to say thanks. I really enjoyed just how organized everything was. The presentation felt really seamless And being able to actually get things up and running was nice because that doesn't always happen in every <a href="/tags/workshop">workshop</a>. So, yeah, thank you. Thank you both. This was great. Well, thanks for that great feedback. That makes my day. Yeah. Yeah, thanks a lot.

Before we get started, just a quick note about a couple of helpful resources for you all today. So we've shared a number of links and resources in the Discord channel that's linked to this QR <a href="/tags/code">code</a> here on the screen. Also, today we're going to be using <a href="/tags/yarn">Yarn</a> as our package manager. So if you don't have <a href="/tags/yarn">Yarn</a>, I recommend installing that quick. And then also you can optionally use your own Miro accounts today. We'll be giving you guys like demo credentials if you don't want to create your own. But if you want to use the app that we built today later on, it might be handy to use your own Miro account, which will be just one part of what we talked about today.So let's go ahead and get started. So why are we all here today? Well, we are here to talk a bit about using reusable server components in <a href="/tags/nextjs">Next.js</a>. And actually, we'll talk a bit more about things that aren't just <a href="/tags/react-server-components">React server components</a>. We'll get into a few other <a href="/tags/nextjs">Next.js</a> capabilities as well. But this is kind of the headlining topic today.So we are Will Bishop and Matt Porosinski. So today, as I mentioned, we're going to talk about <a href="/tags/react-server-components">React Server components</a>. And before we like get our hands dirty, just real briefly, like, what exactly are we going to be building today? Well, we're going to be building an XJS app where we leverage <a href="/tags/react-server-components">React Server components</a>, which are now kind of like a native built-in capability. And right here we're showing a difference in the client side bundle size for when we use like a really large package like Moments.js versus when we don't. And you'll notice that the bundle size in both of these screenshots is actually the same. Despite the fact that we're using Moments.js in one of them. So this is to demonstrate that you can really optimize and improve the <a href="/tags/performance">performance</a> of your app, which is exactly what we're going to show you all today, and give you guys the tools to create your own app and create your own <a href="/tags/react-server-components">react server components</a> a quick look at some of the technologies we're going to be using so obviously we're going to use <a href="/tags/nextjs">next.js</a> and <a href="/tags/react-server-components">react server components</a> and then a little bit later on in the <a href="/tags/workshop">workshop</a> we're going to dive into some new pages and layouts capabilities and <a href="/tags/nextjs">next.js</a> and hopefully we'll have time for some server actions as well and of course we're going to be using Miro the Miro developer platform which is where Metin and I are currently employed. So fun little fact that we'll get to use that as well. Real quick about us. If you don't recognize us from our celebrity screenshot here, we are Will and Metin. So my name is Will Bishop. I am part of our Developer Relations Team at Miro. I've been at Miro for about two years, working on all things API, SDK, and more. And before Before that, I was at Zoom working in a very similar role helping people build apps and integrations on Zoom's developer platform. And now I'll kick it over to Metin to introduce himself.Yeah. So I'm not Grace, as this screenshot says. I'm just Metin. And I'm assuming most of you have seen me last week, either online or in New York, where I was hosting the real-life event. and yeah i would also work on with will on the developer platform and miro enabling everyone to build plugins for miro and a fun fact about our platform is that just last week we've won the developer portal awards for the best <a href="/tags/developer-experience">developer experience</a> and we share that award with react.dev so we're really proud of that yeah for all the hard work that we've been doing. And like the competition is really big companies like even Spotify or Zoom, all of these companies, they also submit their developer portals. And yeah, we really happy with that. So a nice little fun, fun fact here for Meton. Yeah, so we'll be using something. So one of the benefits of <a href="/tags/react-server-components">React server components</a> is that you can talk to to the server on the server, and you don't need to do it on your client, and everything is rendered on the server. And as the example server we're going to talk to, it's going to be the Miro server. And we're going to be fetching <a href="/tags/data">data</a> from Miro boards. And we're going to be using one of the packages that we provide to external developers. And yeah, just two hours ago, we decided to push an update to that package. and yeah we thought things will be fine for this <a href="/tags/workshop">workshop</a> so hopefully everything will be and otherwise we can still use the previous version so there's no problem if we missed something yes we like to live dangerously so we'll keep you guys toes awesome so we're just about to dive in and get our hands dirty but real quick for those of you who might not be familiar with <a href="/tags/react-server-components">React Server Components</a>. I'll just give it a quick little bit of context. So over the last couple of years, <a href="/tags/react-server-components">React Server Components</a> have been in like an experimental or alpha phase. And they only recently came to be stable within like the last six months to a year, which is really exciting, actually, because it means everything we talk about today in terms of <a href="/tags/react-server-components">React Server Components</a> is something you can confidently use on production, and basically start using immediately from today. And yeah, so why do we use <a href="/tags/react-server-components">React Server components</a>, like what are the benefits? Well, the primary one is optimizing your app <a href="/tags/performance">performance</a>. So keeping your client side bundle as small as possible by keeping a lot of things server side. So with <a href="/tags/react-server-components">React Server Components</a>, you've got direct access to your <a href="/tags/database">database</a> or your <a href="/tags/backend">backend</a>. And the <a href="/tags/nextjs">Next.js</a> team has made a lot of really helpful improvements to the <a href="/tags/developer-experience">developer experience</a> for using <a href="/tags/react-server-components">React Server Components</a>. So they were an early partner with the <a href="/tags/react-components">React</a> team, and they've kind of been nurturing the development of <a href="/tags/react-server-components">React Server Components</a> over the last couple of years in partnership with <a href="/tags/react-components">React</a>.

So it means that working with <a href="/tags/react-server-components">React Server Components</a> in <a href="/tags/nextjs">Next.js</a> is really quite easy, and you'll get a taste of that today. So there are a couple of other features we're going to talk about later on in the <a href="/tags/workshop">workshop</a>. Some of them might still be in the experimental phase, such as server actions. But we'll talk more about that before. so just to keep in mind as we talk about the different kinds of components today.All right, so let's go ahead and jump into the <a href="/tags/workshop">workshop</a>. So as a very first step to kick us off, I'm going to start with a boilerplate app that I've already kind of bootstrapped from my command line. And we're all going to build this same app in just a moment. But I want to first demonstrate firsthand the power of <a href="/tags/react-server-components">React server components</a> and show you all the benefits that we were just talking about.So after this, we'll take a step back and we'll walk through as a group, how to get up and running on your own app. But first I'm gonna go over to my IDE with my <a href="/tags/nextjs">Next.js</a> app that have open, and I'm gonna primarily be working in this project here. So to start off, let's show you how you can use <a href="/tags/react-server-components">React Server components</a> to optimize your apps. So for this, I'm going to start by just building my boilerplate up here, by running Yard build, in my command, or in my <a href="/tags/cli">terminal</a>. And I'm going to take a just quick look at the client-side bundle size. So we can see here, I'll make it a little bit bigger if you want, oops, too big, that our bundle size is about 83.9 kilobytes.So let's go ahead and take a screenshot of this, so that we can reference this in a few seconds later on. And I'm going to go back to my mirror board here, and I'm just going to paste this in right here so that we don't lose it. So take note of the size there. And now, I'm going to go ahead and add a rather large package to my application. I'm going to add a moment. So I'm just going to copy this, go back to my app here. <a href="/tags/yarn">yarn</a> add moment this will just take a moment jazz oh god bill it makes fun of me for this but this was actually his joke that i just stole so got to get done uh now we need to import moment um so i'm gonna go to my app slash page.tsx which is right um right here pull down my <a href="/tags/cli">terminal</a> so we can see this a bit better i'm gonna import the moment.js package. And then I'm going to use the moment.js package to display a date time for our homepage of our app. So I'm going to do this just right at the top of our boilerplate application. So that's going to put this right here. Hit save. And then I'm going to run the project. But before I do, I want to just show you all the app that I have running right now. just right here. And we can see that we've got this current date time displaying East Coast time based in the US right now. And this is leveraging the power of <a href="/tags/react-server-components">React server components</a>.So as it turns out, by simply loading our page.tsx file, we're already taking advantage of <a href="/tags/react-server-components">React server components</a>. And I'll explain this some more in just a second. But first, I want to compare the bundle size of this page that now loads in the time item using the momentjs package, which for those of you who use momentjs, you know that sometimes this can be as big as like 200 kilobytes or something like that. So if we go back to our <a href="/tags/cli">terminal</a> here and we run <a href="/tags/yarn">yarn</a> build again, oops, <a href="/tags/yarn">yarn</a> build, let's see if the package size has changed at all. And actually it hasn't. So we can see here. I'll just take another screenshot for us and compare it to the first one we took. It's actually the same exact size on our client-size bundle, 83.9 kilobytes. So just to be sure we can go back to our page here and we can actually inspect the page source. Make this a little bit easier to see. And if we search for time, we'll see that the datetime has been injected here right in the <a href="/tags/html">HTML</a> server-side first, and then it was brought to the client. So the real benefit here is that by default, any components inside this app directory that we have in our <a href="/tags/nextjs">Next.js</a> app, they're going to be rendered server-side first as a <a href="/tags/react-components">React</a> server component. This is an example in our app's page.tsx file, where we import this large package, momentjs. But because this component is within the app directory, like I said, it's going to render server-side first. And the <a href="/tags/frontend">frontend</a> bundle size will remain untouched, even though we are using momentjs. We can see the convenience of using <a href="/tags/react-server-components">React server components</a> to keep our our apps <a href="/tags/performance">performance</a> optimized and reduce what we need to load on the client side.However, what if instead of a static page render date, we wanted to show something dynamic, like the time since the page was rendered? So you could think of things like, maybe you have a blog where you want to update content dynamically, or maybe you want to show things like stock prices, something where you're not necessarily going to want to render it server-side first, because then you can't change it as easily. So for this, we would need a client component. And actually, we can mix client and server components quite easily and the recommendation by the next js team is to actually use as many server components as you can as kind of the core parts of your layout and then sprinkle client components throughout where you might need that kind of client interaction or that kind of dynamic aspect so this approach helps us to keep our client bundle size small while still allowing for those interactive moments where we need them and this screenshot here is right from the next GST.

So this all sounds good, but can be a little confusing in practice. So let's take a closer look. So you can use Client Components within the app directory as well, but you're going to need to be explicit about this in your component file. So this requires the use of the useClient directive that we see over here to ensure that the file will be loaded client-side. If you don't include this and the file is in your app directory, then it's going to be a Server Component by default. You can also use this useServer directive, but that's optional, not needed if you're working in the app directory.So you can see from the example component tree that we have here that we have our server components as our kind of core components at the top. And then we have the client components, you know, as our leaves, so to speak. And we might want to nest more interactive components like a timer or countdown, you know, things that will dynamically change. And so this is exactly what we're going to do. We're going to add a client component to our page to show an example of this kind of dynamic component to complement the server components that we're already using. But first, I also want to call out that you can also technically pass server components to client components. So in the rare case where you want to do this, you would need to pass the server component as a child. So, you know, this is not necessarily like a common use case, but procedure on the left hand side, we have an example on the slide where a server component is passed inside a client component and in the client component, we can render the server component, but it's not going to be able to have any input, for example. This server portion of the component will be rendered before the client even loads, meaning that we're not going to be able to update it after load. Just something to keep in mind, And it's possible, but not exactly a core use case necessarily.Okay. So, with that in mind, let's go ahead and create a client component. And just a reminder, we're going to walk through creating this app with you all in just a moment. But first, I just want to show you how client components and server components can live in harmony. So, I'm going to go ahead and copy this component, command C. I'm going to go back to my boilerplate application here. And I'm going to, within my app folder, create a timeDifference.tsx component. So go over here, call this timeDifference. Paste in this <a href="/tags/code">code</a> snippet. And then in layout.tsx, I'm going to import this timeDifference component. Oops. All right, and then further down the page, I'm going to go ahead and within the <a href="/tags/html">HTML</a> that we're returning, I'll do this basically right at the top here. I'm just going to add this Countdown component. I'm going to copy that right from here. And hit save. And now I'm going to go back to our app. And we should see now two dates and times. Okay. So we're missing something here. Let's see. Import time difference. Yup. Is mounted is false. So what is about coming from changed in the US effect on line 23. So what's the dependency of the use effects? Nothing. Let's see, let's try and just restart our server and see if that makes a difference. Yeah start. Okay, yep, we just had to restart our server there. So now we can see we've got this dynamic client component displaying here. And similar to before, I'm going to go ahead and inspect the page source here. Make this a bit easier to see. And now if we look for the page rendered here, we can see unlike our server component, which was rendered on the server side, this is being updated dynamically client-side. So we don't actually see that date-time because it's happening after the page load. So this is all to show you that, you know, client component and server component, they serve different needs, but you can use them together to kind of still get that kind of dynamic aspect of a page that you might want without, you know, using only client components.

And, you know, bringing the full size of a package like Moment.js to your front-end bundle, which is going to slow down your app, slow down the page load time, and all that kind of stuff. So this is high level, like really the value of <a href="/tags/react-server-components">React server components</a> is that we get to, you know, have all these things living together in harmony while keeping <a href="/tags/performance">performance</a> and <a href="/tags/optimization">optimization</a> top of mind.Yeah, Bennett's question. Yeah, so just trying to fully understand. And so the package bundling size didn't change in this scenario. I'm kind of just relaying what I think happened and looking to check in and see if I'm on point with tracking. And it's because the parent component was a server-side rendered component that allowed then the client component to not impact the bundle size. Am I understanding that correctly?Yeah. Yeah, that's exactly right. So because we have this separation in our app of client components and server components, so anything in this app directory is by default going to be a server component. And when we created this time difference component, we have this use client directive here. So we're actually letting it know that we don't want this one to be a server component, we want to keep this a client component. This isn't going to affect the bundle size. But going back to this page.dsx file, where we're actually using the moment.js package, this would have affected the bundle size, if we had that use client directed at the top, because it would be bringing the full weight of that moment.js package to our front end. Whereas, by using a <a href="/tags/react-components">React</a> Server component, because we're in the app directory, this file knows that we want to render this server-side before we, you know, load the client, if that makes sense.Yes, but then when you did the time difference one, that one was the client component, right? Exactly, yep. This is a client. Yeah. Yeah, that's because it's updating on every, from top of my head, a thousand milliseconds. Yeah, you can't do that on the client. And that one still didn't impact the bundle size, though, because the app folder... No, this one does. Oh, it does? This one does, yeah. Oh, okay. Yeah. I think that's where I was missing the connection. So this one does impact the bundle size. Yeah. Yeah, this is just to show the difference between rendering something on the client and the server. They're kind of similar, right? It's showing a time, just a lifetime difference or the time difference from the initial render. And what's that? Can we see what that difference is in terms of the bundling size? Mm-hmm. Yeah, we can run the build here. Run <a href="/tags/yarn">yarn</a> build. I suspect this will be very small because it's not a huge file. Yes, not even noticeable. Yeah, yeah, very small. But if, for instance, we had a client component with another MPM package, the size of moment.js or something, then that would be a more significant impact that we could easily see. And the reason that we don't actually notice this specific Time Difference component is because the build is gonna be minifying everything and it's just a few characters then. Yeah, exactly. Great question though, Bennett. Awesome, so to keep going here, we're now gonna go ahead and just take a step back And we're actually gonna bootstrap our own version of this kind of app. And this is gonna be the foundation for what we're gonna do later on in the <a href="/tags/workshop">workshop</a> where Matt and Will talk to us about some pages and routing aspects of <a href="/tags/nextjs">Next.js</a> and hopefully server actions if we have time. So if you run into any issues, while we set up this boiler plate, just raise your hand, shout, and we'll make sure we can get you squared away. So the very first thing we're gonna do is if you have a Miro account and you're logged into that, That would be helpful as we're gonna use the Miro and cam package to create our next JS app. But if you don't have Miro account, then no worries, you can use the demo credentials that we have on the next slides. So step one to install this boilerplate is going to be to copy this <a href="/tags/code">code</a> snippet and then we're gonna go to our desktop and we're gonna go ahead and just bootstrap a new app. So let me go create a new folder for this and I'll call this app. Okay, so I'm going to type in, react-summit-november. And I'm gonna paste this in, get copied from the Miro board, make this a bit bigger for everyone, hit enter. And this is gonna use Miro's MCAT package to bootstrap a <a href="/tags/nextjs">Next.js</a> app for us.

And it's got some built-in things that will allow us to call the Miro API as one of our examples later on. Once this is created, We're gonna see this link to preconfigure an app in Miro. So, you go ahead and click on this, after it loads, I'll just copy this here and go to my browser. This is gonna take all the stuff we just filled out from the command line and populate this app in Miro. So I'm gonna hit Create App. And then what I'm gonna need is just these client ID and client secret, which is gonna allow us to call the Miro REST API later on in the <a href="/tags/workshop">workshop</a>.

So I'm gonna go back to my desktop. I'm gonna open up this app that we just created, bring it into my IDE. And we can see here that we've got a bunch of boilerplate files by default. We've got the app directory that we were talking about earlier. And we got a dot ENB where we're gonna wanna plug in our Miro credentials. So I'm gonna go ahead and copy these While Will is explaining this, let me give you a little background on why we're using the Miro API. Most of you are thinking, I signed up for server components, not for advertising talk for the Miro platform. And that's because to show one of the things that makes server components really good is you need to be talking to a server. So this is the server that we know by heart, like the API we know by heart. so that makes the <a href="/tags/workshop">workshop</a> easier. Yeah, exactly.

Thank you too, Marco. Yeah, we are happy with this amount of people because it makes it manageable, a manageable group. Yeah. Great. Thank you too, Sai. So, to go into these last few things. So we have a few resources listed here that you can use if you're gonna be working further with server components. So of course the main server components <a href="/tags/documentation">documentation</a>, you can go here and check it out. How these layouts work. I tried my best to explain this, but it's kind of a hard concept to grasp. So you can read more about this in the <a href="/tags/documentation">docs</a>. And actually, this whole <a href="/tags/workshop">workshop</a> was designed from reading the <a href="/tags/documentation">docs</a>. So we just took the time for you and made it into a nice <a href="/tags/video">video</a>. But we've just been reading the <a href="/tags/documentation">docs</a>. So big shout out to the <a href="/tags/nextjs">Next.js</a> <a href="/tags/documentation">documentation</a> team, great job. Server Actions, really cool to check out and using your new application. And then of course the Miro developer <a href="/tags/documentation">documentation</a>. If you're interested in continuing like creating a little plugin that pops out here inside of a Miro board, everything is listed here. Create Miro app is the tool that we use to bootstrap our application. And that we bravely updated two hours before this version. And if you want to keep in touch with us, you can do so on Discord or find us on Twitter, X, social media, LinkedIn, whatever you have. I have the most Google-able name in the world, so you can find me online. Yeah, I think that concludes it. Wils, were there any last words from your side? No, just, yeah, thanks, everyone, for joining. It was great to do this today. Thanks a lot. Yeah. And thanks, everyone, for joining <a href="/tags/react-components">React</a> Summit. Hope you enjoyed this <a href="/tags/workshop">workshop</a> as much as the in-person day for people that were there too. And the remote day. Hope to see you at the next edition or the next edition in Amsterdam in June, which is going to be crazy cool also. Thanks, everyone, for joining.

React Summit US

React Summit US 2023

Building Reusable Server Components in NextJS

Construyendo Componentes de Servidor Reutilizables en NextJS

Today's Workshop focused on using React Server Components in Next.js to optimize app performance. The workshop covered topics such as using client and server components together, app bootstrap, using the Miro API, setting up credentials and layout structure, working with layout and page components, creating board links and layout, understanding server rendering and Miro board, fetching data and server performance, working with Next.js routes and board metadata, debugging, getting data from the board, usage of Miro in real-world apps, and the conclusion with helpful resources.

React continues to evolve their beta capability, React Server Components, and they're continuing to further develop them in partnership with frameworks like NextJS.In this workshop, attendees will learn what React Server Components are, how to effectively build and use them in NextJS, and focus on one of the major advantages of React/NextJS: reusability through components.We will also cover related beta technologies enabled by the `app` directory, such as nested layouts and server actions (alpha/experimental capability).Join us for this hands-on, 120 minute workshop!Technologies: React, JavaScript/Typescript, NextJS, Miro

Will Bishop

Mettin Parzinski

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.

JSNation US 2024

React Summit US 2024

React Advanced

React Advanced Conference 2024

Productivity Conference

Productivity Conference 2024

React Day Berlin

React Day Berlin 2024

Node Congress

I’m attending @NodeCongress, the biggest conf on #JavaScript backends – by clicking the badge you may get a free remote ticket & join me there with 5k other #nodejs devs & 35 great speakers #deno #cloudflare #awscloud

Node Congress 2025

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2025

React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2025

C3 Dev Festival

Join me at C3 Dev Fest, a contemporary software engineering festival!

Register to win an all-paid trip to Amsterdam. Elevate your career with industry experts and workshops & rock 3 dance stages at the after-party!

C3 Dev Festival 2025

TechLead Conference

I'm attending TechLead Conference 2024 – get your free remote ticket and join me there

Building Reusable Server Components in NextJS

FAQ

Comments