Nordic.js 2017 • Guillermo Rauch - Next.js by Example

[Music] all right what a great introduction I'm gonna record it and it plays back every time I have a conference presentation in the future so my talk today is TVAAS and that's basically a synonym of a presentation about everything we do outside so the introduction that they just gave us is really great because the

kind of talk tells you about the story of how all these projects came together and today what I thought about giving you is a little tour by example of all our projects so the title of this presentation is next draya's by example and I'm gonna walk you through step by step how to build something really nice

during the course of this presentation so my name of course guillermo rauch is the introduction said you can find me on twitter and the thing that we do at site is simplify processes that are seemingly too complicated too burdensome things that when a make your screen a skin crawl like they said earlier so our main product is now you go to any directory you run now and you get a URL to your deployment and with this tool you can

deploy static websites nodejs projects and dockerfile projects all server Leslie which means you don't set up anything you just learn now and you get a URL so when we were coming up with this project we thought about building a really neat UI for you to see everything is going on with your cloud and we wanted to have all this really cool features like real-time updates

dashboards that were interactive offline support stateful components and so on a custom fancy URL kind of like a github type experience server rendering for example showing the logs of your deployments in real time but the problem that we had is we have built this really great deployment tool but we didn't have the counterpart to actually build that web UI we couldn't do that with just one command so what we

came up with in an exercise of great naming conventions we came up with now and then we came up with next so the only thing that you have to start an next j/s projects is bring in this three dependencies next react and react Dom so this is everything that you have to to set up a react project that has all the aforementioned features so instead of dealing with boilerplate projects that you have to clone setting up configuration by yourself or dealing

with the uncertainty of whether you're doing the right thing for development and for production for example next takes care of it all for you and the only requirement that it has is that you have a pages directory so for those of you who have are familiar with PHP for example there's this great notion that you can use the filesystem as an API itself like the filesystem is already there we have conventions already like there's packaged J's and there is node and there's core modules

so it took that one step further and we said okay we'll add a page directory where your screens or the entry points into your application we'll go and we'll you get as the result is you run next and you and you get a server that runs your application and you start interacting with it and for that example that as you showed earlier so we can't welcome to my page you would get this and this sounds very simple it sounds like something we would do 20 years ago